android implements 多个,React Native多入口实现

前言

最近在做原生项目集成RN的时候遇到了一个问题：如果从原生进入RN有多个入口或者说从原生不同的地方可以进入到不同的RN组件，该怎么做？由此展开了调研。

在调研后得出了两种方案：

注册多个根组件入口

只注册一个入口，根据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方法中返回对应的跟组件名字，如下图：

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

这种方式是在进入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 getPackages() {

return Arrays.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

case 2:

return

case 3:

return

}

}

}

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

两种方式对比

注册多个根组件方式

第一种方案在网上据说内存开销太大，因此针对两者进行内存测试。

刚打开APP内存占用如图：

打开第一个RN页面，内存会明显拔高，并且随时间会缓慢增加，而后在一段时间后会明显降低并又开始缓慢增加，如此循环。

在退出这个RN页面后内存占用并没有明显下降

在打开第二个页面之后页面会有个明显下降而后又迅速增多(如下图V字形曲线)

退出第二个RN页面再打开第三个RN页面，内存占用会较明显下降而后又迅速增多(如下图V字形曲线)

最高内存占用在4M左右。

单注册入口的属性选择方式

未加载jsbundle之前：

加载第一个RN页面，内存占用曲线明显拔高，并且随时间逐渐增多，但在一段时间后会跌落，如此循环

退出RN页面，内存占用没有明显减少

加载第二个RN页面，加载后增加，过后会减少，退出RN页面内存占用没有明显减少

加载第三个RN页面，加载后增加，过后会减少，退出RN页面内存占用没有明显减少。APP最高占用内存也在4M左右

总体来说：单注册入口和多注册入口，占用内存没有明显区别