對于 RN 跳 OC境钟，OC 又跳 HTML中捆，我是拒絕的遏餐，可是沒辦法有時候就要這樣寫 ??
之前公司一個 RN 的項(xiàng)目里要加直播功能，不過僅用 RN 貌似實(shí)現(xiàn)不了灭将，只能跳轉(zhuǎn)到 OC 的控制器進(jìn)行直播或觀看疼鸟。里面還有個聊天室功能，本來打算用融云的庫直接在 OC 里寫庙曙，結(jié)果被告知要用 HTML 寫空镜，因?yàn)榘沧磕敲嫒瞬粔颍瑢懲曛苯觾深^用 ??捌朴，現(xiàn)在將這段互相跳轉(zhuǎn)吴攒、傳值的苦逼經(jīng)歷記錄下來。
不多 BB 了男旗，開整
一舶斧、設(shè)置導(dǎo)航控制器為根控制器
1、AppDelegate.h中加入如下代碼
// RN 跳轉(zhuǎn) OC 控制器需要拿到 nav
@property (nonatomic, strong) UINavigationController * nav;
2察皇、AppDelegate.m中設(shè)置UINavigationController為rootViewController
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
UIViewController *rootViewController = [UIViewController new];
// 設(shè)置 UINavigationController 為 rootVC
_nav = [[UINavigationController alloc] initWithRootViewController:rootViewController];
rootViewController.view = rootView;
...
return YES;
}
這時重新運(yùn)行項(xiàng)目茴厉，就會出現(xiàn)我們熟悉的導(dǎo)航條了泽台。
二、完成 RN 與 OC 交互矾缓，利用監(jiān)聽通知實(shí)現(xiàn)跳轉(zhuǎn)
1怀酷、新建一個類用于 RN 與 OC 交互
RNHelper.h文件如下
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
@interface RNHelper : NSObject <RCTBridgeModule>
@end
RNHelper.m文件如下
#import "RNHelper.h"
@implementation RNHelper
@synthesize bridge = _bridge;
// 可添加參數(shù)以指定 RN 訪問 OC 的模塊名，默認(rèn)為類名
RCT_EXPORT_MODULE();
// 參數(shù)類型根據(jù)你需要自己改
RCT_EXPORT_METHOD(openTestVC:(NSDictionary *)dict){
NSLog(@"RN 傳入 OC 的數(shù)據(jù)為：%@", dict);
// 這里需要使用主線程嗜闻，否則可能會失效
dispatch_async(dispatch_get_main_queue(), ^{
[[NSNotificationCenter defaultCenter] postNotificationName:@"openTestVC" object:dict];
});
}
@end
更多實(shí)現(xiàn) RN 與 OC 交互方法詳見傳送門蜕依。
2、AppDelegate.m中監(jiān)聽通知
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(testNotification:) name:@"openTestVC" object:nil];
return YES;
}
實(shí)現(xiàn)跳轉(zhuǎn)方法琉雳，TestViewController是我隨意寫的一個控制器
-(void)testNotification:(NSNotification *)notification {
NSLog(@"成功收到通知：%@", notification);
TestViewController * testVC = [[TestViewController alloc] init];
testVC.dict = notification.object;
[self.nav pushViewController:testVC animated:YES];
// 注意不能在這里移除通知否則 push 進(jìn)去后又 pop 將失效
}
三样眠、調(diào)用跳轉(zhuǎn)方法
1、RN 中導(dǎo)入翠肘，并引入 OC 中剛剛創(chuàng)建的那個類
import { NativeModules } from 'react-native';
var helper = NativeModules.RNHelper;
2檐束、比如設(shè)置個按鈕，點(diǎn)擊進(jìn)行跳轉(zhuǎn)
<TouchableOpacity style={styles.testBtn} onPress={this.pushNextVC.bind(this)}>
<Text style={{color: 'white'}}>跳轉(zhuǎn) OC 界面</Text>
</TouchableOpacity>
3束倍、實(shí)現(xiàn)點(diǎn)擊方法
pushNextVC() {
var dict = {
'message': '點(diǎn)個喜歡再走唄??'
}
helper.openTestVC(dict);
}
大功告成被丧，修改了
Xcode中代碼，別忘了重新運(yùn)行項(xiàng)目
至于導(dǎo)航欄樣式和 RN 中的設(shè)置绪妹，有時候會有一些沖突甥桂，就具體需求具體分析吧
