-
首先创建RN项目，定下基调，整个 APP 大部分都是通过RN实现的，因莫名的原因，个别页面要使用iOS实现。
// RN 命令行创建项目
react-native init RNJump
-
几乎所有的 App 都有Navigator，为了方便（懒），就直接使用NavigatorIOS，并设置了根视图Root
<NavigatorIOS
initialRoute={{
component: Root,title: 'RN 首页',}}
barTintColor= 'cyan'
style={{flex: 1}}
/>
-
RN传参：root页面push下一个页面，并传递一个简单的参数text: 'root'
<Text onPress={()=>{
this.props.navigator.push({
component: Second,title: 'RN第二页',passProps: {
text: 'root'
}
})
}}>
跳到第二页
</Text>
-
iOS准备工作：因为RN中实现了Navigator,所以在iOS中也要有对应的NavigationController，最主要的也是要实现 push 动画，当然自定义也是可以的。
// AppDelegate.m
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.navi = [[UINavigationController alloc] initWithRootViewController:rootViewController];
self.window.rootViewController = self.navi;
// 这里设置hidden，是为了不覆盖 RN 中的 navigator
self.navi.navigationBar.hidden = YES;
-
这时候 iOS 有自己的navigationController， RN 也有它的navigator，虽然表现形式一样，但是相互之间并不能真正调用彼此，必须要有一个方法在中间搭桥。这就需要之前的RN 调用 Native模块中的调用方法
1)实现协议<rctbridgemodule></rctbridgemodule>
2)实现跳转方法RCT_EXPORT_METHOD
3)RN 调用方法，进行跳转和传参
// NativeViewController.m
RCT_EXPORT_MODULE(NativeVC);
// RN 调用该方法，并且传参
RCT_EXPORT_METHOD(goToNextWith:(NSString *)aStr) {
// 这里必须返回主线程进行 push
dispatch_async(dispatch_get_main_queue(),^{
AppDelegate *app= (AppDelegate *)[[UIApplication sharedApplication] delegate];
self.paramsString = aStr;
[app.navi pushViewController:self animated:YES];
});
}
// second.js
import {NativeModules} from 'react-native';
var native = NativeModules.NativeVC;
<Text onPress={()=>{
native.goToNextWith('我是从js过来的');
}}>
跳到Native
</Text>
-
最后就是从 iOS 再回到 RN，这个就比较简单了，其实就是第 1 步的手动实现
1)创建下一个 VC NextNativeViewController
2)RCTRootView 替换 VC.view
3)传参是通过 initialProperties: 字典传递的，当然也可以手动赋值属性 rootView.appProperties
// NextNativeViewController.m
NSDictionary *dic = @{@"text": @"从Xcode传过来的参数"};
NSURL *jsCodeLocation;
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"NextSecond" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"NextSecond" initialProperties:dic launchOptions:nil];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
self.view = rootView;
// NextSecond.js
export default class NextSecond extends Component {}
// 注册'NextSecond' 必须跟 moduleName 一致
AppRegistry.registerComponent('NextSecond',()=> NextSecond);
-
这时候外层使用 iOS 的VC，内层使用 RN 的rootView，你可以在 js 文件中处理所有UI和逻辑。但是，跳转下一个页面的时候，还是只能按照第 6 步的方式进行包装，如果想像第 3 步那样，就必须再一次实现第 2 步，重新初始化一个 RN 的navigator,并设置component
<NavigatorIOS
initialRoute={{
component: RealView,title: 'RealView',passProps:{text: this.props.text}
}}
barTintColor= 'cyan'
style={{flex: 1}}
/>
-
总结：
RN 本质上就是写界面UI的，声明了 RCTRootView 嵌在 ViewController里面。不过这个 view 在 RN 中可以当成 VC 来使用，真正跳转到 Native 的时候，就显露本质了。
iOS 中的 navigationController.navigationBar 跟 RN 中的 navigator 虽然表现形式相同，但并不能共用，而且 iOS 会覆盖RN的实现。因此，必须分开处理，iOS 中就需要隐藏 navigationBar
- (void)viewWillAppear:(BOOL)animated
{
[super viewWillAppear:animated];
self.navigationController.navigationBar.hidden = NO;
}
- (void)viewWillDisappear:(BOOL)animated
{
[super viewWillDisappear:animated];
self.navigationController.navigationBar.hidden = YES;
} 当然如果是自定义导航栏的话不用考虑这个问题。
