React-Native 原生跳转不同的RN界面的实现思路
来源:互联网 发布:python兼职讲师 编辑:程序博客网 时间:2024/06/09 19:54
最近在研究React-Native开发App,准备把RN运用到自己的毕业设计中,因为以前做过一个购物社交类的App,但是没有做完,所以就想把它完善一下作为毕业设计,而RN可以热更新,所以对于购物类app中的一些时常变化的商品介绍列表就准备用一下RN来试试了。
既然要使用RN和Native混合使用,就得考虑原生如何向RN跳转的问题了,之前做过的RN项目都是直接一个Activity进入index.android.js,渲染js界面,或者RN界面向Activity跳转,而现在需要的是从不同的Activity跳转不同的RN界面,而不是仅仅的跳转index.android.js。
于是查看Activity启动RN的代码,发现ReactNativeHost中如下代码
protected String getJSMainModuleName() { return "index.android"; } @Nullable protected String getJSBundleFile() { return null; } @Nullable protected String getBundleAssetName() { return "index.android.bundle"; }
看似如果修改这两个函数的返回值应该可以更改第一个显示的界面(但是我没试过。。。),由于ReactNativeHost这个类是不能更改的,所以我们复制一份代码出来,重新建一个ReactNativeHost2 类,然后稍微一修改一些与ReactNativeHost相关联东西就行,不过本人不是用的这种方法,如果有兴趣,大家可以试试可不可以。。。
我用的是另一种方式,由于现在是每次都跳转index.android.js ,所以只要在index.android.js中渲染不同的布局就可以了,类似于下面代码:
render() { if(flag =='xxx1'){ return ( <View1></View1> ); }else if(flag=='xxx2'){ <View2></View2> } }
View1 和 View2 是要渲染的页面,这样就可以类似于跳转不同页面了,接下来的问题就是flag的获取问题了,如何在Native部分启动RN时传入不同的flag呢?
继续在原生代码里寻找,找到ReactActivityDelegate中如下代码:
protected void loadApp(String appKey) { if(this.mReactRootView != null) { throw new IllegalStateException("Cannot loadApp while app is already running."); } else { this.mReactRootView = this.createRootView(); this.mReactRootView.startReactApplication(this.getReactNativeHost().getReactInstanceManager(), appKey, this.getLaunchOptions()); this.getPlainActivity().setContentView(this.mReactRootView); } }
这是Native启动RN的核心代码,startReactApplication的第三个参数 this.getLaunchOptions() 是一个Bundle 看名字像是一个启动选项,于是尝试一下,
原本getLaunchOptions()方法返回的是null 更改为:
@Nullable protected Bundle getLaunchOptions() { Bundle bundle = new Bundle(); bundle.putString("flag1","home"); return bundle; }
尝试传入flag1
之后再js端这样接收:
componentWillMount() { console.log("----componentWillMount"+this.props.flag1); }
查看结果 发现 flag1传入了 home值,所以此方案是可行的。
接下来就可以根据flag的值 渲染不同的布局 就可以了 。
- React-Native 原生跳转不同的RN界面的实现思路
- react-native的原生传参到rn
- react native之原生和RN的交互
- React native 界面跳转原生Android界面
- react-native统一入口界面,并实现页面的跳转
- 关于React Native 跳转到原生页面界面详解
- (十二)React Native跳转到android原生界面Activity
- React-Native 中 StackNavigator的跳转界面的使用
- React-Native之Android:原生界面与React界面的相互调用
- React-Native之Android:原生界面与React界面的相互调用
- react-native页面的跳转
- RN开源组件react-native-video的用法
- RN(React Native)开发Android App的新技术?
- 【React Native】那些年RN上跳过的坑
- RN(react native)入坑指南-07,使用navigator实现页面跳转
- React Native 嵌入原生项目混合开发-自定义RN Activity
- React Native 原生RN嵌套webView,并自适应高度
- 在react-native的项目中跳转到原生iOS页面
- jQuery对象与dom对象的转换$("#id")[0]
- 设置Winform控件层级关系
- 大数据公安应用分析
- cxgrid 学习
- mysql protocal 2: 响应报文
- React-Native 原生跳转不同的RN界面的实现思路
- php抽奖概率算法(刮刮卡,大转盘)
- iMessage app 开发
- 纸上谈兵之一 线程池的创建
- 归并排序+一个编程需要注意的地方
- mysql主从复制(测试版)
- Redis简单梳理及集群配置
- AFNetworking到底做了什么?
- div+CSS实现三角形