對于 RN 跳 OC，OC 又跳 HTML，我是拒絕的，可是沒辦法有時候就要這樣寫 ??

之前公司一個 RN 的項目里要加直播功能，不過僅用 RN 貌似實現(xiàn)不了，只能跳轉(zhuǎn)到 OC 的控制器進行直播或觀看。里面還有個聊天室功能，本來打算用融云的庫直接在 OC 里寫，結(jié)果被告知要用 HTML 寫，因為安卓那面人不夠，寫完直接兩頭用 ??，現(xiàn)在將這段互相跳轉(zhuǎn)、傳值的苦逼經(jīng)歷記錄下來。

不多 BB 了，開整

演示.gif

一、設(shè)置導航控制器為根控制器

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

這時重新運行項目，就會出現(xiàn)我們熟悉的導航條了。

二、完成 RN 與 OC 交互，利用監(jiān)聽通知實現(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 的模塊名，默認為類名
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

更多實現(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;
}

實現(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 進去后又 pop 將失效
}

三、調(diào)用跳轉(zhuǎn)方法

1、RN 中導入，并引入 OC 中剛剛創(chuàng)建的那個類

import { NativeModules } from 'react-native';

var helper = NativeModules.RNHelper;

2、比如設(shè)置個按鈕，點擊進行跳轉(zhuǎn)

<TouchableOpacity style={styles.testBtn} onPress={this.pushNextVC.bind(this)}>
    <Text style={{color: 'white'}}>跳轉(zhuǎn) OC 界面</Text>
</TouchableOpacity>

3、實現(xiàn)點擊方法

pushNextVC() {
    var dict = {
        'message': '點個喜歡再走唄??'
    }
    helper.openTestVC(dict);
}

大功告成，修改了Xcode中代碼，別忘了重新運行項目

演示.gif

至于導航欄樣式和 RN 中的設(shè)置，有時候會有一些沖突，就具體需求具體分析吧