前言

最近在做原生項目集成RN的時候遇到了一個問題：如果從原生進入RN有多個入口或者說從原生不同的地方可以進入到不同的RN組件，該怎么做？由此展開了調(diào)研。
在調(diào)研后得出了兩種方案：

1. 注冊多個根組件入口
2. 只注冊一個入口，根據(jù)RN傳遞屬性選擇進入不同的組件

多注冊入口

這種方案是在index.android.js /index.ios.js 中注冊多個跟組件。
下面以android為例。
Android項目集成RN此處不具體展開，請參考：
React Native植入原生Android應用的流程解析
彈射起步：Android原生項目集成React Native模塊

注冊多個根組件方式如下：

'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方法中返回對應的跟組件名字，如下圖：

enter description here

單注冊入口

這種方式是在進入RN之前設置傳遞屬性，然后在根組件獲取這個屬性，并跟進屬性的不同進入到不同的入口。

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頁面

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);

兩種方式對比

多注冊入口方式

第一種方案在網(wǎng)上據(jù)說內(nèi)存開銷太大，因此針對兩者進行內(nèi)存測試。
剛打開APP內(nèi)存占用如圖：

enter description here

打開第一個RN頁面，內(nèi)存會明顯拔高，并且隨時間會緩慢增加，而后在一段時間后會明顯降低并又開始緩慢增加，如此循環(huán)。

enter description here

在退出這個RN頁面后內(nèi)存占用并沒有明顯下降
在打開第二個頁面之后頁面會有個明顯下降而后又迅速增多(如下圖V字形曲線)

enter description here

退出第二個RN頁面再打開第三個RN頁面，內(nèi)存占用會較明顯下降而后又迅速增多(如下圖V字形曲線)

enter description here

最高內(nèi)存占用在4M左右。

單注冊入口方式

未加載jsbundle之前：

enter description here

加載第一個RN頁面，內(nèi)存占用曲線明顯拔高，并且隨時間逐漸增多，但在一段時間后會跌落，如此循環(huán)

enter description here

退出RN頁面，內(nèi)存占用沒有明顯減少
加載第二個RN頁面，加載后增加，過后會減少，退出RN頁面內(nèi)存占用沒有明顯減少

enter description here

加載第三個RN頁面，加載后增加，過后會減少，退出RN頁面內(nèi)存占用沒有明顯減少。APP最高占用內(nèi)存也在4M左右

enter description here

總體來說：單注冊入口和多注冊入口，占用內(nèi)存沒有明顯區(qū)別