react native createMaterialTopTabNavigator切换时请求数据

转载

智能开发先锋 2024-09-24 15:37:41

文章标签 ui xcode iOS Text App 文章分类 机器学习人工智能

其实在学习 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模块中的调用方法

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

<Text onPress={()=>{
          native.goToNextWith('我是从js过来的');
     }}>
          跳到Native
     </Text>
复制代码

最后就是从 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

<NavigatorIOS

      initialRoute={{
          component: RealView,
          title: 'RealView',
          passProps:{text: this.props.text}

      }}
      barTintColor= 'cyan'
      style={{flex: 1}}

  />
复制代码

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

原本还想写点，反过来的情况，即，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; } ``` 当然如果是自定义导航栏的话不用考虑这个问题。