1.搭建ReactNative开发基础环境可以根据http://reactnative.cn/docs/0.31/getting-started.html文档来配置，安装必须的工具
2.创建一个Ios工程 TestRTC
3.进入到工程根目录下面执行安装ReactNative命令行工具 npm install -g react-native-cli
4.在工程的根目录下面创建一个React文件夹 来存放RN的相关文件
5.在React文件夹下创建一个package.json文件，用于初始化RN(这里面的package.json最好是在初始化一个工程里面copy过来 以保证是最新的react、reactnative版本，初始化项目命令react-native init AwesomeProject )，package.json里面的name要和ios工程里面的名字一样即：”name”:”TestRTC”
6.安装ReactNative的依赖包 进入到React目录下面执行npm install
7.安装成功后创建index.ios.js(在React目录下)，可以从上面说的初始化的 AwesomeProject工程里面copy过来 (不过index.ios.js里面的项目名要对应 和你ios工程名一样即可).
8.使用Cocoapods自动集成Reactnative,在工程的根目录下创建Podfile文件
Pod file文件内容为
target 'TestRTC' do
pod 'React', :path => './React/node_modules/react-native', :subspecs => [
'Core',
'ART',
'RCTActionSheet',
'RCTAdSupport',
'RCTGeolocation',
'RCTImage',
'RCTNetwork',
'RCTPushNotification',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket',
'RCTLinkingIOS',
]
end
9.然后执行pod install --verbose --no-repo-update 安装
10.以上步骤执行完之后集成RN到工程已经大功告成，下面就看怎么应用RN在Xcode里面
11.添加库libc++
随便创建一个Controller,Controller代码如下
self.title=@"rn";
self.view.backgroundColor= [UIColororangeColor];
NSString*urlStr =@"http://127.0.0.1:8081/index.ios.bundle?platform=ios&dev=true";
NSURL*jsCodeLocation = [NSURLURLWithString:urlStr];
//NSURL *jsCodeLocation;
//jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
RCTRootView*rootView = [[RCTRootViewalloc]initWithBundleURL:jsCodeLocationmoduleName:@"iOSReactNative"initialProperties:nillaunchOptions:nil];
rootView.backgroundColor= [[UIColoralloc]initWithRed:1.0fgreen:1.0fblue:1.0falpha:1.0f];
rootView.frame= [[UIScreenmainScreen]bounds];
[self.viewaddSubview:rootView];
现在就可以运行Xcode了。
12.运行后跳转到从oc跳转到RN界面的时候会出现红屏，这时候不用慌，仔细看错误之后你会发现是npm服务没有起来，然后在控制台进入到React目录下执行npm start 命令 ，在重新运行工程你会发现reactNative界面就可以展现在我们面前了
ReactNative 与 原生IOS的交互
1.在.h文件中引入#import"RCTBridgeModule.h"
2.在.h文件中添加代理<RCTBridgeModule>
3.在.m文件的实现部分，需要包含RCT_EXPORT_MODULE()宏，这个宏也可以添加一个参数用来指定在 JS 中访问这个模块的名字。如果你不指定，默认就会使用这个 OC 类的名字。
4.写入reactnative需要调用的方法
RCT_EXPORT_METHOD(print:(NSString *)text) {
NSLog(@"%@", text);
}
6.在ReactNative需要实现的JS文件中引入
var{NativeModules} =require('react-native');
7.引入IOS中的类
varMLRNController=NativeModules.MLRNController;
8.在需要实现的地方调用
MLRNController.print("Hello World");
注:不知道为什么RN所在的类中self的内存地址会被修改,意思就是你想要的self跟你在于js交互中用到的self不是同一个self.同时出现的情况就会出现pop不掉我们的RN类的这个界面.
解决办法:使用单例来保存我们原本要用的self,在viewDidLoad方法中做保存
1.新建一个单例类(MLRNSington)来做保存self
2.在单例类中存放RNVC
3.在RN类中的self保存到单例中
4.pop出控制器
网友评论