項(xiàng)目背景:
集成網(wǎng)易云信的sdk夺克,開發(fā)了一個(gè)原生的即時(shí)聊天模塊蔬胯,而項(xiàng)目的整體框架使用react-native開發(fā)的朋截,現(xiàn)在需要將這個(gè)原生模塊集成到項(xiàng)目中蛹稍。
一、在react-native中跳轉(zhuǎn)原生頁面部服,需要做的幾個(gè)修改
1)在AppDelegate.h中唆姐,創(chuàng)建一個(gè)原生的UINavigation導(dǎo)航
2)在AppDelegate.m中,將app的window的rootViewController設(shè)置為_nav; 將_nav的rootViewController設(shè)置為RN的rootView的饲宿,看下圖
3)創(chuàng)建一個(gè)oc的類厦酬,繼承自NSObject,實(shí)現(xiàn)RCTBridgeModule協(xié)議瘫想,xxx.h如下
4)xxx.m文件如下:
代碼解釋:
RCT_EXPORT_MODULE(chatModule); //聲明在RN中調(diào)用的原生模塊的名字仗阅,如果這里不聲明,則在RN中通過該類名來調(diào)用
RCT_EXPORT_Method国夜,原生拋出方法給RN調(diào)用减噪,如果原生不拋出方法,則RN無法調(diào)用原生方法
NSDictionary *dic 參數(shù)车吹,該參數(shù)是RN傳給原生的筹裕,類型可以自己定義,這里定義成字典窄驹,是為了方便擴(kuò)展
dispatch_async(dispatch_get_main_queue(), ^{
? ?? ? TestViewController *testVc = [[TestViewController alloc]init]
? ? ? ?AppDelegate *app = (AppDelegate *)[[UIApplication sharedApplication] delegate];
? ? ? [app.nav pushViewController:vc animated:YES];
? });//因?yàn)橐鲰撁嫣D(zhuǎn)朝卒,這里最好回到主線程來做;block中則是你想要跳轉(zhuǎn)的代碼
5) TestViewController中則按照原生的開發(fā)正常開發(fā)即可
6)接下來是RN代碼中對(duì)原生模塊的調(diào)用乐埠,在需要跳轉(zhuǎn)原生頁面的地方抗斤,
import {NativeModules}from 'react-native'
var chat =NativeModules.chatModule;
chat.openChatViewController({"userId":"abc"});
7)至此赊舶,已經(jīng)可以從RN頁面跳轉(zhuǎn)到原生頁面了