React Native 和 Native 之间自由切换

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

首先创建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;
 }
```
当然如果是自定义导航栏的话不用考虑这个问题。

React Native 和 Native 之间自由切换

相关推荐