对于 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 中的设置，有时候会有一些冲突，就具体需求具体分析吧
