(iOS)React-Native集成到本地,实现与Native的互调

2018-02-12 10:52:33来源:https://www.jianshu.com/p/5111312c57b4作者:程序猿孙哥哥人点击

分享


一、新建一个工程,名为RNAndiOS(名字随便)


image.png
二、创建一个存放react-native的文件夹RN(名字随意)


image.png
三、RN文件夹下新建一个名为package.json的文件和一个index.ios.js的文件
package.json:
{
"name": "RNAndiOS",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "^16.0.0-alpha.12",
"react-native": "^0.47.2"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "3.0.2",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
"jest": {
"preset": "react-native"
}
}

index.ios.js:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
export default class RNAndiOS extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
iOS RN 混合开发的Demo
</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
}
});
AppRegistry.registerComponent('RNAndiOS', () => RNAndiOS);

五、cd到RN文件夹,执行npm install命令,安装成功后文件夹如下:


image.png
六、在项目根目录下创建Podfile(需要cocoapods,版本要最新的,不是的更新一下,不然会报错),然后执行pod install命令
Podfile:
platform :ios, '8.0'
target "RNAndiOS" do
pod 'Yoga', :path => ‘./RN/node_modules/react-native/ReactCommon/yoga'
pod 'React', :path => ‘./RN/node_modules/react-native', :subspecs => [
'Core',
'RCTText',
'RCTImage',
'RCTAnimation',
'RCTNetwork’,
'RCTWebSocket',
'BatchedBridge'
]
end

七、安装完成后文件夹如下:


image.png
八、打开RNAndiOS.xcworkspace(不是RNAndiOS.xcodeproj),为了方便测试后面的RN与原生的互调,我们在项目里放一个导航控制器。
项目结构:


image.png
AppDelegate:
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
ViewController *root = [[ViewController alloc] init];
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:root];
self.window.rootViewController = nav;
[self.window makeKeyAndVisible];
return YES;
}

ViewController:
#import "ViewController.h"
#import "SecondViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor lightGrayColor];

UIButton *pushButton = [UIButton buttonWithType:UIButtonTypeCustom];
[pushButton setTitle:@"点我去RN" forState:UIControlStateNormal];
pushButton.frame = CGRectMake(100, 100, 100, 100);
[pushButton setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
[pushButton addTarget:self action:@selector(pushToRN) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:pushButton];
}
- (void)pushToRN {
SecondViewController *second = [[SecondViewController alloc] init];
[self.navigationController pushViewController:second animated:YES];
}
@end

SecondViewController:
#import "SecondViewController.h"
#import <React/RCTRootView.h>
#import "RNSendBridgeModule.h"
#define KMainScreenW [UIScreen mainScreen].bounds.size.width
#define KMainScreenH [UIScreen mainScreen].bounds.size.height
#define isIphoneX (KMainScreenH == 812 ? YES : NO)
@interface SecondViewController ()
@end
@implementation SecondViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"RNAndiOS" initialProperties:nil launchOptions:nil];
rootView.backgroundColor = [UIColor whiteColor];
rootView.frame = CGRectMake(0, isIphoneX?88:64, KMainScreenW, isIphoneX?KMainScreenH-122:KMainScreenH-64);//简单适配一下iPhone X
[self.view addSubview:rootView];
}
@end

至此,准备工作结束。ViewController是原生,SecondViewController是react-native界面
九、cd到RN目录,执行 react-native start 命令,执行成功后直接运行项目。运行项目前记得在info.plist中配置允许http请求,不然会大红屏。也许会加载的有点慢,这很正常,因为debug模式的RN和release模式的RN简直不是同一个东西。
react-native start成功运行后是这样的:


image.png
iPhone X模拟器截图:


Simulator Screen Shot - iPhone X - 2017-11-20 at 15.35.16.png
至此React-Native已经集成到本地,RN和Native的交互在下一篇文章文章链接。
遇到红屏不要急,网上查错误信息,查不到看一下npm install有没有警告,是不是少安装了什么组件。还有cocoapod是不是最新的,info.plist有没有配置允许http请求,Podfile,packa.json,SecondViewController里的项目名有没有写错。






最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台