在react-native的项目中跳转到原生iOS页面
来源:互联网 发布:大学生体育锻炼数据 编辑:程序博客网 时间:2024/05/29 13:08
我在github上更新了我学习react-native的一些心得和小技巧,下面的这个例子也在里面,如果现在的项目不忙,基本每天都会更新,希望可以帮助到各位读者。react-native-learn
http://www.jianshu.com/p/2baeac04275e
需求:
前端时间写过两篇关于在原生iOS项目中新建react-native页面,并跳转到原生的文章,但昨天有人问我怎么从原生的react-native项目中跳转到自动生成的iOS页面里。
我就研究了一下,发现其实这个跳转和之前的跳转流程基本是一样的。
这个例子在我的github项目3中
步骤
原理
如果想从react-native中跳转到自带的原生页面,首要的问题就是跳转,怎么跳转。
在react-native中提供给了我们Navigator这个组件,而原生的iOS也提供了UINavigationController,所以想要跳转,我们就需要用到这两个东西啦。
Navigator
这个是react-native提供给我们跳转其他页面的组件,需要在react-native项目中引入Navigator
<View style={{ flex: 1 }}> <Navigator initialRoute={{ name: 'Root', component: Root }} style={{height:64}} configureScene={(route) => { if (route.sceneConfig) { return route.sceneConfig; } return Navigator.SceneConfigs.PushFromRight; } } renderScene={(route, navigator) => { let Component = route.component; return ( <Component navigator = {navigator} route = {route} {...route.passProps} /> )} }/></View>
关于react-native中Navigator
使用的文章网上有很多,我在这里就不多写了,可能以后会写篇文章说一下我对Navigator的理解。
UINavigationController
这个是原生iOS开发中用到最多的控件,每次跳转的时候都会用到它,但我们是想要从react-native跳转到这个里面,所以需要在原生的项目中将rootViewController设置为UINavigationController
AppDelegate.h
// 创建一个原生的导航条@property (nonatomic, strong) UINavigationController *nav;
AppDelegate.m
// 初始化Nav _nav = [[UINavigationController alloc]initWithRootViewController:rootViewController]; self.window.rootViewController = _nav;
这样我们想要跳转的准备就算是完成了,接下来就是将我们想要跳转的页面,传给react-native,告诉它我要跳转到哪个页面。
上面是我的项目修改后的项目目录,其中蓝色部分是我要跳转的页面,红色部分是我告诉react-native跳转的方法。
原生项目中
- PushNative类
PushNative.h
中
#import <Foundation/Foundation.h>// 导入RCTBridgeModule类,这个是react-native提供#import "RCTBridgeModule.h"// 遵守RCTBridgeModul协议@interface PushNative : NSObject<RCTBridgeModule>@end
PushNative.m
中
#import "PushNative.h"#import "RCTBridge.h"// 导入跳转的页面#import "TestController.h"// 导入AppDelegate,获取UINavigationController#import "AppDelegate.h"@implementation PushNativeRCT_EXPORT_MODULE(PushNative)// RN跳转原生界面// RNOpenOneVC指的就是跳转的方法,下面会用到RCT_EXPORT_METHOD(RNOpenOneVC:(NSString *)msg){ NSLog(@"RN传入原生界面的数据为:%@",msg); //主要这里必须使用主线程发送,不然有可能失效 dispatch_async(dispatch_get_main_queue(), ^{ TestController *one = [[TestController alloc]init]; AppDelegate *app = (AppDelegate *)[[UIApplication sharedApplication] delegate]; [app.nav pushViewController:one animated:YES]; });}
- TestController类
self.navigationItem.title = @"我是原生页面哟~";
完成上面的步骤之后,只需要最后一步就可以成功的跳转啦!
react-native项目中
NativeModules
需要导入NativeModules
组件,这个是官方提供给我们与原生交互的组件,通过它我们才能调用到原生的方法- 初始化要跳转的方法
// 看到 PushNative 是不是很熟悉,没错这个就是原生中写的那个类// 后面一定要一样哦,前面可以随意定制。var Push = NativeModules.PushNative;
- 跳转
InteractionManager.runAfterInteractions(()=> { // RNOpenOneVC这个也是写在原生里面的再PushNative中哦~ Push.RNOpenOneVC('测试');});
好啦,写到这里我们的跳转就算是大功告成了!如果有什么不懂的地方,可以去我的项目中看看。
总结
学习react-native也好几个月了,这段时间也是踩坑无数,但学习的过程中也是一个成长的过程,我很喜欢这个感觉。如果大家有什么问题,可以在简书里面评论,也可以私信我。
ps:之前没下简书这个软件,所以之前文章的评论都没怎么看,但我昨天下了一个。
- 在react-native的项目中跳转到原生iOS页面
- 在iOS中创建React-Native页面,并跳转到原生页面
- 从React Native 跳转到原生页面
- IOS-React Native 使用CocoaPods集成到原生项目中
- React Native集成到原生项目(IOS)
- React Native 集成到原生项目(iOS)
- React Native 集成到原生项目(iOS)
- React Native 嵌入到iOS原生项目
- React Native集成到IOS原生项目
- iOS在原生项目中插入React Native(最终版)
- iOS原生项目中集成React Native
- iOS原生项目中集成React Native
- iOS原生项目中集成React Native
- iOS原生项目中集成React Native
- 关于React Native 跳转到原生页面界面详解
- React Native移植到原生iOS平台项目
- IOS与React Native混编,将RN框架使用CocoaPods集成到原生项目中
- 原生Android项目中集成React native页面
- Android studio 2.2 logcat 不打印log的问题
- -----------------------python&Tensorflow分割线------------------
- qt 之绘制 圆弧(抽奖圆盘)
- 机器学习算法之SVM(1)结构风险最小化
- Listview的基础使用
- 在react-native的项目中跳转到原生iOS页面
- docker挂载
- Qt5.7+Opencv2.4.9人脸识别(四)模型训练
- XML解析
- bzoj 1996: [Hnoi2010]chorus 合唱队 dp
- cocos2d-x 3.x窗口大小
- 8 种 NoSQL 数据库系统对比
- Android动画学习笔记-Android Animation
- yii查询结果对象转为数组