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