前言
最近在做原生项目集成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<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);
两种方式对比
注册多个根组件方式
第一种方案在网上据说内存开销太大,因此针对两者进行内存测试。
刚打开APP内存占用如图:
打开第一个RN页面,内存会明显拔高,并且随时间会缓慢增加,而后在一段时间后会明显降低并又开始缓慢增加,如此循环。
在退出这个RN页面后内存占用并没有明显下降
在打开第二个页面之后页面会有个明显下降而后又迅速增多(如下图V字形曲线)
退出第二个RN页面再打开第三个RN页面,内存占用会较明显下降而后又迅速增多(如下图V字形曲线)
最高内存占用在4M左右。
单注册入口的属性选择方式
未加载jsbundle之前:
加载第一个RN页面,内存占用曲线明显拔高,并且随时间逐渐增多,但在一段时间后会跌落,如此循环
退出RN页面,内存占用没有明显减少
加载第二个RN页面,加载后增加,过后会减少,退出RN页面内存占用没有明显减少
加载第三个RN页面,加载后增加,过后会减少,退出RN页面内存占用没有明显减少。APP最高占用内存也在4M左右