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