如何在react-native中跳转原生页面

项目背景:

集成网易云信的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页面跳转到原生页面了

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容