React-Native 原生跳转不同的RN界面的实现思路

Posted 2022-12-04 潇潇微雨up

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