最近在研究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的值 渲染不同的布局 就可以了 。