RN笔记-TabNavigator非Push显示原生页面

react-native使用react-native-tab-navigator底部导航器，需要实现Tab导航器切换rn视图和native原生视图。

参考rn官网：http://reactnative.cn/docs/0.41/native-component-ios.html#content 提炼整理出以下内容。

1、IOS本地文件

创建类RNChatViewManager，.h文件和.m文件代码如下，其中ChatContactViewController为将要展示的原生视图控制器。

// RNChatViewManager.h
#import "RCTViewManager.h"
#import "ChatContactViewController.h"

@interface RNChatViewManager : RCTViewManager

@property (nonatomic, strong) ChatContactViewController *chatContactVC;

@end

// RNChatViewManager.m
#import "RNChatViewManager.h"

@implementation RNChatViewManager
RCT_EXPORT_MODULE()

- (UIView *)view{
    _chatContactVC = [[ChatContactViewController alloc] init];
    return _chatContactVC.view;
}

@end

2、RN代码配置

需要导入requireNativeComponent来加载Native组件
RNChatView即调用了Native工程中创建的RNChatViewManager类。

注意写法：RNChatView即表示RNChatViewManager类
不可修改为requireNativeComponent('RNChatViewManager', ChatView)

import React, { Component, PropTypes } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  requireNativeComponent,
} from 'react-native';

var OCChatView = requireNativeComponent('RNChatView', ChatView);

export default class ChatView extends Component {
  static propTypes = {
    color: PropTypes.string,
  };
  render(){
    return(
      <OCChatView {...this.props} />
    );
  }
}

3、注意事项

以上配置即可以实现rn导航器在js页面与oc页面之间相互切换了，但是会出现点击oc页面上的push跳转操作时无反应。这是因为RN跳转Native时需要在主线程中执行，而默认是在辅线程中。

// 执行跳转
//自定义宏IS_USING_REACT_NATIVE区分是否来自RN的跳转操作
 if (IS_USING_REACT_NATIVE) {
    [AppDelegate RNPushViewControllerWith:vc];
  }else{
     [self.navigationController pushViewController:vc animated:YES];
  }

// 封装在appDelegate.m
// 在主线程push跳转，否则无效
+ (void)RNPushViewControllerWith:(UIViewController *)vc{
    dispatch_async(dispatch_get_main_queue(), ^{
        AppDelegate *app = (AppDelegate *)[[UIApplication sharedApplication] delegate];
        [app.nav pushViewController:vc animated:YES];
    });
}