项目背景:
集成网易云信的sdk,开发了一个原生的即时聊天模块,而项目的整体框架使用react-native开发的,现在需要将这个原生模块集成到项目中。
一、在react-native中跳转原生页面,需要做的几个修改
1)在AppDelegate.h中,创建一个原生的UINavigation导航
2)在AppDelegate.m中,将app的window的rootViewController设置为_nav; 将_nav的rootViewController设置为RN的rootView的,看下图
3)创建一个oc的类,继承自NSObject,实现RCTBridgeModule协议,xxx.h如下
4)xxx.m文件如下:
代码解释:
RCT_EXPORT_MODULE(chatModule); //声明在RN中调用的原生模块的名字,如果这里不声明,则在RN中通过该类名来调用
RCT_EXPORT_Method,原生抛出方法给RN调用,如果原生不抛出方法,则RN无法调用原生方法
NSDictionary *dic 参数,该参数是RN传给原生的,类型可以自己定义,这里定义成字典,是为了方便扩展
dispatch_async(dispatch_get_main_queue(), ^{
TestViewController *testVc = [[TestViewController alloc]init]
AppDelegate *app = (AppDelegate *)[[UIApplication sharedApplication] delegate];
[app.nav pushViewController:vc animated:YES];
});//因为要做页面跳转,这里最好回到主线程来做;block中则是你想要跳转的代码
5) TestViewController中则按照原生的开发正常开发即可
6)接下来是RN代码中对原生模块的调用,在需要跳转原生页面的地方,
import {NativeModules}from 'react-native'
var chat =NativeModules.chatModule;
chat.openChatViewController({"userId":"abc"});
7)至此,已经可以从RN页面跳转到原生页面了