原生界面跳轉(zhuǎn)到RN界面
- 在原生應(yīng)用如TianJinDL根目錄下創(chuàng)建package.json文件匾浪，并cd到TianJinDL根目錄下執(zhí)行npm install 安裝依賴配置科平。package.json文件中內(nèi)容類似：
{
"name": "TianJinDL",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "15.0.2",
"react-native": "0.26.1",
"react-navigation": "^1.0.0-beta.11"
}
}
2.在原生應(yīng)用TianJinDL的Podfile文件中添加所集成的RN需要的ReactNative依賴庫(kù)颖杏，并cd到TianJinDL根目錄下波岛，執(zhí)行pod install安裝您市。Podfile文件內(nèi)容如下（其中path為步驟1中安裝的node_modules中的react-native文件的路徑）：
pod 'React',:path =>'/Users/wangna/Desktop/TianJinDL/node_modules/react-native',:subspecs =>
[
'Core',
'RCTText',
'RCTImage',
'RCTNetwork',
'RCTWebSocket',
]
3.在TianJinDL根目錄下碱蒙，添加要集成的RN界面的相關(guān)js文件<br />4.在原生應(yīng)用TJDMeViewController控制器中，通過RCTRootView實(shí)現(xiàn)跳轉(zhuǎn)到RN界面
NSURL *jsCodeLocation;
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"TianJinDL"
initialProperties:props
launchOptions:nil];
rootView.frame = CGRectMake(0, 64, SCREEN_WIDTH, SCREEN_HEIGHT-50-64);
[self.view addSubview:rootView];
<a name="d17d6479"></a>
RN界面跳轉(zhuǎn)到原生界面
1.在原生應(yīng)用中創(chuàng)建RCTModules類孕索，繼承自NSObject铐达，使用通知的方法進(jìn)行消息傳送實(shí)現(xiàn)界面的跳轉(zhuǎn)，RCTModules.m中
//定義導(dǎo)出的類名
RCT_EXPORT_MODULE(RTModule)
//定義導(dǎo)出的方法
RCT_EXPORT_METHOD(RNOpenOneVC:(NSString *)msg){
NSLog(@"RN傳入原生界面的數(shù)據(jù)為：%@",msg);
//這里必須使用主線程發(fā)送檬果，否則可能失效
dispatch_async(dispatch_get_main_queue(), ^{
[[NSNotificationCenter defaultCenter] postNotificationName:@"RNOpenOneVC" object:nil];
});
}
2.在集成了RN界面的控制器TJDMeViewController中添加觀察者接受通知瓮孙，實(shí)現(xiàn)界面的跳轉(zhuǎn)
[[NSNotificationCenter defaultCenter]addObserver:self selector:@selector(doPushNotification:) name:@"RNOpenOneVC" object:nil];
-(void)doPushNotification:(NSNotification *)notification{
RNToiOSController *one = [[RNToiOSController alloc]init];
[self.navigationController pushViewController:one animated:YES];
}
3.js中調(diào)用
var RNMoodules = NativeModules.RTModule;
<TouchableOpacity style={styles.touch1} onPress={()=>RNMoodules.RNOpenOneVC('測(cè)試')}>
</TouchableOpacity>
