RN 跳转 OC 控制器

对于 RN 跳 OC，OC 又跳 HTML，我是拒绝的，可是没办法有时候就要这样写 😂

之前公司一个 RN 的项目里要加直播功能，不过仅用 RN 貌似实现不了，只能跳转到 OC 的控制器进行直播或观看。里面还有个聊天室功能，本来打算用融云的库直接在 OC 里写，结果被告知要用 HTML 写，因为安卓那面人不够，写完直接两头用 😂，现在将这段互相跳转、传值的苦逼经历记录下来。

不多 BB 了，开整

演示.gif

一、设置导航控制器为根控制器

1、AppDelegate.h中加入如下代码

// RN 跳转 OC 控制器需要拿到 nav
@property (nonatomic, strong) UINavigationController * nav;

2、AppDelegate.m中设置UINavigationController为rootViewController

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  UIViewController *rootViewController = [UIViewController new];
  //  设置 UINavigationController 为 rootVC
  _nav = [[UINavigationController alloc] initWithRootViewController:rootViewController];
  rootViewController.view = rootView;
  ...
  return YES;
}

这时重新运行项目，就会出现我们熟悉的导航条了。

二、完成 RN 与 OC 交互，利用监听通知实现跳转

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;

// 可添加参数以指定 RN 访问 OC 的模块名，默认为类名
RCT_EXPORT_MODULE();

// 参数类型根据你需要自己改 
RCT_EXPORT_METHOD(openTestVC:(NSDictionary *)dict){
    
    NSLog(@"RN 传入 OC 的数据为：%@", dict);
    
    // 这里需要使用主线程，否则可能会失效
    dispatch_async(dispatch_get_main_queue(), ^{
        [[NSNotificationCenter defaultCenter] postNotificationName:@"openTestVC" object:dict];
    });
}

@end

更多实现 RN 与 OC 交互方法详见传送门。

2、AppDelegate.m中监听通知

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(testNotification:) name:@"openTestVC" object:nil];
    
  return YES;
}

实现跳转方法，TestViewController是我随意写的一个控制器

-(void)testNotification:(NSNotification *)notification {
    
    NSLog(@"成功收到通知：%@", notification);
    
    TestViewController * testVC = [[TestViewController alloc] init];
    testVC.dict = notification.object;
    [self.nav pushViewController:testVC animated:YES];
    //  注意不能在这里移除通知否则 push 进去后又 pop 将失效
}

三、调用跳转方法

1、RN 中导入，并引入 OC 中刚刚创建的那个类

import { NativeModules } from 'react-native';

var helper = NativeModules.RNHelper;

2、比如设置个按钮，点击进行跳转

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

3、实现点击方法

pushNextVC() {
    var dict = {
        'message': '点个喜欢再走呗❤️'
    }
    helper.openTestVC(dict);
}

大功告成，修改了Xcode中代码，别忘了重新运行项目

演示.gif

至于导航栏样式和 RN 中的设置，有时候会有一些冲突，就具体需求具体分析吧