要实现RN向原生应用传递SectionID,并分别跳转到不同的原生界面,RN提供了NativeModules
、InteractionManager
接口,在原生应用中需要实现遵守RCTBridgeModule
协议的RCT_EXPORT_METHOD
跳转方法即可。
1、RN和原生导航功能
要先自己配置RNNavigator
和原生的UINavigationController
导航功能。这里只贴出原生的导航代码:
// 在appDelegate.h
// 声明一个原生的导航条
@property (nonatomic, strong) UINavigationController *nav;
// 在appDelegate.m
// 初始化Nav
_nav = [[UINavigationController alloc]initWithRootViewController:rootViewController];
[_nav setNavigationBarHidden:YES animated:YES];
self.window.rootViewController = _nav;
// self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
2、原生项目中新建PushNative类
#import <Foundation/Foundation.h>
// 导入RCTBridgeModule类,这个是react-native提供
#import <React/RCTBridgeModule.h>
// 遵守RCTBridgeModul协议
@interface PushNative : NSObject<RCTBridgeModule>
@property (nonatomic, strong) NSString *value;
@end
#import "PushNative.h"
#import <React/RCTBridge.h>
#import "AppDelegate.h"
// 导入原生跳转页面头文件
#import "HomeworkListViewController.h"
#import "MyReviewsViewController.h"
@implementation PushNative
RCT_EXPORT_MODULE(PushNative)
// RN跳转原生界面
// RNOpenOneVC跳转方法
RCT_EXPORT_METHOD(RNOpenOneVC:(NSString *)msg){
//这里我传递的是SectionID,分别跳转不同的原生界面
NSLog(@"RN传入原生界面的数据:%@",msg);
self.value = msg;
NSInteger jsValue = [_value integerValue];
switch (jsValue) {
case 0:
//必须使用主线程发送 不然有可能失效
dispatch_async(dispatch_get_main_queue(), ^{
HomeworkListViewController *vc = [[HomeworkListViewController alloc] init];
AppDelegate *app = (AppDelegate *)[[UIApplication sharedApplication] delegate];
[app.nav pushViewController:vc animated:YES];
});
break;
case 1:
//必须使用主线程发送 不然有可能失效
dispatch_async(dispatch_get_main_queue(), ^{
MyReviewsViewController *review = [[MyReviewsViewController alloc] initWithType:[[LoginUserUtil userType] intValue] withStudentId:[LoginUserUtil userId]];
AppDelegate *app = (AppDelegate *)[[UIApplication sharedApplication] delegate];
[app.nav pushViewController:review animated:YES];
});
break;
default:
break;
}
}
@end
3、RN项目中
// 导入以下头文件
NativeModules,
InteractionManager,
// 声明Push方法 即原生所创建的PushNative类
// 后面一定要一样,前面可以随意定制。
var Push = NativeModules.PushNative;
// 跳转原生应用
pushNative(sectionID){
InteractionManager.runAfterInteractions(()=> {
// RNOpenOneVC这个也是写在原生PushNative类中
Push.RNOpenOneVC(sectionID);
})
},
// 调用跳转的方法
<TopView
popToHomeView={(sectionID)=>this.pushNative(sectionID)} //最终在这里拿到传递上来的参数
/>
到此,RN跳转原生的方法已经配置完了,Push.RNOpenOneVC(sectionID);
即执行了跳转的操作并将SectionID
传递给原生。
在原生PushNative.m
中self.value = msg;
即接收到传递过来的数据,通过传递的数据分别跳转不同的原生界面。
需要注意的是,跳转时必须在主线程执行,否则有可能失效。