React Native多入口实现

时间 2019-11-07

原文原文链接

前言

最近在作原生项目集成RN的时候遇到了一个问题：若是从原生进入RN有多个入口或者说从原生不一样的地方能够进入到不一样的RN组件，该怎么作？由此展开了调研。
在调研后得出了两种方案：javascript

注册多个根组件入口java
只注册一个入口，根据RN传递属性选择进入不一样的组件react

注册多个根组件入口

这种方案是在index.android.js /index.ios.js 中注册多个跟组件。
下面以android为例。
Android项目集成RN此处不具体展开，请参考：
React Native植入原生Android应用的流程解析
 弹射起步：Android原生项目集成React Native模块android

多注册根组件方式以下：ios

'use strict'
import {
  AppRegistry,
} from 'react-native';
import RNEntrance1 from './js/RNEntrance1'
import RNEntrance2 from './js/RNEntrance2'
import RNEntrance3 from './js/RNEntrance3'

AppRegistry.registerComponent('RNActivity1', () => RNEntrance1);
AppRegistry.registerComponent('RNActivity2', () => RNEntrance2);
AppRegistry.registerComponent('RNActivity3', () => RNEntrance3);

相应的，在Android原生模块中须要创建多个对应的ReactActivity，并在getMainComponentName方法中返回对应的跟组件名字，以下图：react-native

只注册一个入口，根据RN传递属性选择进入不一样的组件

这种方式是在进入RN以前设置传递属性，而后在根组件获取这个属性，并跟进属性的不一样进入到不一样的入口。ide

public class RNActivity extends ReactActivity {
    @Override
    protected String getMainComponentName() {
        return "RNActivity";
    }

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Nullable
            @Override
            protected Bundle getLaunchOptions() {
                return MainApplication.getBundle();
            }
        };
    }
}

getLaunchOptions方法能够设置传递给跟组件的属性值（Bundle类型），此处以传递int值为例。
具体的MainApplication.java 代码以下：测试

public class MainApplication extends Application implements ReactApplication {

    public final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage()
            );
        }
    };

    @Override
    public ReactNativeHost getReactNativeHost() {
        return mReactNativeHost;
    }

    private static Bundle sBundle = new Bundle();
    public static int RN_ENTRANCE_1 = 1;
    public static int RN_ENTRANCE_2 = 2;
    public static int RN_ENTRANCE_3 = 3;

    public static void setRNInitProps(int entrance) {
        sBundle.putInt("entrance",entrance);
    }

    public static Bundle getBundle(){
        return sBundle;
    }
}

而在index.android.js 中获取this.props.entrance并判断不一样条件下进入不一样的RN页面ui

import React, {Component} from 'react';
import {AppRegistry,} from 'react-native';
import RNEntrance1 from './js/RNEntrance1'
import RNEntrance2 from './js/RNEntrance2'
import RNEntrance3 from './js/RNEntrance3'

class Root extends Component {
    render() {
        switch (this.props.entrance) {
            case 1:
                return <RNEntrance1 />
            case 2:
                return <RNEntrance2 />
            case 3:
                return <RNEntrance3 />
        }

    }
}
AppRegistry.registerComponent('RNActivity', () => Root);