1.搭建ReactNative開發(fā)基礎環(huán)境可以根據(jù)http://reactnative.cn/docs/0.31/getting-started.html文檔來配置坠敷，安裝必須的工具
2.創(chuàng)建一個Ios工程 TestRTC
3.進入到工程根目錄下面執(zhí)行安裝ReactNative命令行工具? npm install -g react-native-cli
4.在工程的根目錄下面創(chuàng)建一個React文件夾 來存放RN的相關文件
5.在React文件夾下創(chuàng)建一個package.json文件侨艾，用于初始化RN(這里面的package.json最好是在初始化一個工程里面copy過來 以保證是最新的react举塔、reactnative版本震蒋，初始化項目命令react-native init AwesomeProject )牵咙，package.json里面的name要和ios工程里面的名字一樣即：”name”:”TestRTC”
6.安裝ReactNative的依賴包 進入到React目錄下面執(zhí)行npm install
7.安裝成功后創(chuàng)建index.ios.js(在React目錄下)抵代，可以從上面說的初始化的 AwesomeProject工程里面copy過來 (不過index.ios.js里面的項目名要對應 和你ios工程名一樣即可).
8.使用Cocoapods自動集成Reactnative,在工程的根目錄下創(chuàng)建Podfile文件
Pod file文件內(nèi)容為
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.然后執(zhí)行pod install --verbose --no-repo-update 安裝
10.以上步驟執(zhí)行完之后集成RN到工程已經(jīng)大功告成模闲，下面就看怎么應用RN在Xcode里面
11.添加庫libc++
隨便創(chuàng)建一個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];
現(xiàn)在就可以運行Xcode了建瘫。
12.運行后跳轉(zhuǎn)到從oc跳轉(zhuǎn)到RN界面的時候會出現(xiàn)紅屏，這時候不用慌尸折，仔細看錯誤之后你會發(fā)現(xiàn)是npm服務沒有起來啰脚，然后在控制臺進入到React目錄下執(zhí)行npm start 命令 ，在重新運行工程你會發(fā)現(xiàn)reactNative界面就可以展現(xiàn)在我們面前了
ReactNative 與 原生IOS的交互
1.在.h文件中引入#import"RCTBridgeModule.h"
2.在.h文件中添加代理<RCTBridgeModule>
3.在.m文件的實現(xiàn)部分实夹，需要包含RCT_EXPORT_MODULE()宏橄浓，這個宏也可以添加一個參數(shù)用來指定在 JS 中訪問這個模塊的名字。如果你不指定亮航，默認就會使用這個 OC 類的名字荸实。
4.寫入reactnative需要調(diào)用的方法
RCT_EXPORT_METHOD(print:(NSString *)text) {
NSLog(@"%@", text);
}
6.在ReactNative需要實現(xiàn)的JS文件中引入
var{NativeModules} =require('react-native');
7.引入IOS中的類
varMLRNController=NativeModules.MLRNController;
8.在需要實現(xiàn)的地方調(diào)用
MLRNController.print("Hello World");
注:不知道為什么RN所在的類中self的內(nèi)存地址會被修改,意思就是你想要的self跟你在于js交互中用到的self不是同一個self.同時出現(xiàn)的情況就會出現(xiàn)pop不掉我們的RN類的這個界面.
解決辦法:使用單例來保存我們原本要用的self,在viewDidLoad方法中做保存
1.新建一個單例類(MLRNSington)來做保存self
2.在單例類中存放RNVC
3.在RN類中的self保存到單例中
4.pop出控制器
