React Native 和 Native 之间自由切换RN 和 N 自由切换

其实在学习 RN 的时候，一直都有种想法，RN 在界面布局上确有其独到之处，但有时候并不如 Native 来的舒服，而且第三方的控件/组件也没有 Native 的丰富，因此就想有些界面能不能 Native 来写，然后再跳回 React Native，并且可以相互传参，应该是种很爽的体验。

首先创建RN项目，定下基调，整个 APP 大部分都是通过 RN 实现的，因莫名的原因，个别页面要使用 iOS 实现。
```
// RN 命令行创建项目
react-native init RNJump
```
几乎所有的 App 都有 Navigator，为了方便（懒），就直接使用 NavigatorIOS，并设置了根视图 Root

RN传参：root 页面 push 下一个页面，并传递一个简单的参数 text: 'root'

{
      this.props.navigator.push({
          component: Second,
          title: 'RN第二页',
          passProps: {
              text: 'root'
          }

      })
 }}>
      跳到第二页

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模块中的调用方法

实现协议
实现跳转方法 RCT_EXPORT_METHOD
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;

{
       native.goToNextWith('我是从js过来的');
  }}>
       跳到Native

最后就是从 iOS 再回到 RN，这个就比较简单了，其实就是第 1 步的手动实现

创建下一个 VC NextNativeViewController
RCTRootView 替换 VC.view
传参是通过 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

RN -> N

简单画了个流程图可能会清晰易懂一点。源码这里

原本还想写点，反过来的情况，即，App 大部分是 Native 实现的，部分页面需要 RN 实现，这之间怎么跳转、传参，又想了想，几乎一样，就不啰嗦了，虽然当初不明白的时候想了好久，但真正想明白了，其实很简单。当然也写了个demo，有兴趣可以看看这里。

总结：

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;
 }

当然如果是自定义导航栏的话不用考虑这个问题。

RN 和 N 之间自由切换，目前想到的是这个方法，当然还没研究源码，后续也许会有更好的解决办法，可以共用一个导航栏，而不必分开处理。
浅薄之见，如果有错误的地方，万望指正，感激不尽！