参考从react-native中跳转到自带的原生页面,首要的问题就是跳转,怎么跳转。
在react-native中提供给了我们Navigator这个组件(相信做过RN开发的小伙伴都有用到过),而原生的iOS也提供了UINavigationController,所以想要跳转,我们就需要用到这两个东西。
本质还是ios中进行跳转,RN调原生暴露的跳转功能方法即可
ios原生
ToolPushNative.h文件
#import <Foundation/Foundation.h>
#import <React/RCTBridgeModule.h>
@interface ToolPushNative : NSObject<RCTBridgeModule>
@end
ToolPushNative.m文件
#import "ToolPushNative.h"
// 导入跳转的页面
#import "ToolsViewController.h"
@implementation ToolPushNative
RCT_EXPORT_MODULE(ToolPushNative)
// RN跳转原生界面
// RNOpenToolsVC指的就是跳转的方法,下面会用到
RCT_EXPORT_METHOD(RNOpenToolsVC:(NSString *)msg){
NSLog(@"RN传入原生界面的数据为:%@",msg);
//主要这里必须使用主线程发送,不然有可能失效
dispatch_async(dispatch_get_main_queue(), ^{
ToolsViewController *toolsVC = [[ToolsViewController alloc]init];
toolsVC.hidesBottomBarWhenPushed = NO;
//获取当前的导航控制器(我这里是从二级控制器页面加载RN,然后返回一级控制器)。也可利用UIApplication获取
UIViewController*rootvc = [self getCurrentVC];
[rootvc.navigationController popViewControllerAnimated:NO];
// AppDelegate *app = (AppDelegate *)[[UIApplication sharedApplication] delegate];
// [app.nav pushViewController:toolsVC animated:YES];
});
}
RN中
1.需要导入NativeModules
// 看到 PushNative 是不是很熟悉,没错这个就是原生中写的那个类
// 后面一定要一样哦,前面可以随意定制。
var Push = NativeModules.ToolPushNative;
2.跳转
goBackNative = () => {
Push.RNOpenToolsVC('传值给原生的数据');
}