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

前端之家收集整理的这篇文章主要介绍了React-Native 原生跳转不同的RN界面的实现思路前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近在研究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相关文章