出于各方面考量一般 React Native 不会制作大型组件，这意味着 React Native 不会制作完整 APP 或者占据软件核心，在这种情况下 React Native 在程序中处于组件状态，因而在一个 APP 中可能存在多个组件。
多组件情况下市面上有几种处理方案：
第一种就是注册多个组件
image.png
这样会出现内存消耗问题。
第二种是只注册一个组件
形式如下
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);
根据网上的测试数据，这种方式并没有效率上的提升，并且这两种方法都面临一个问题，就是 这两种方案都是建立在 JS 端模块都建立在同一个工程内。
结合以上观点，考虑到以模块为单位的 React Native 很有可能是多个工程并行开发，计划采用多个 JSCoreLocation 的方式，也就是通过在原生端预定义地址。
使用以下形式的代码：
let jsCodeLocation = Bundle.main.url(forResource: "loginWithPasswordScreen.ios", withExtension: "jsbundle")
// or
// let jsCodeLocation = Bundle.main.url(forResource: "index.ios", withExtension: "jsbundle")
let rootView = RCTRootView(
bundleURL: jsCodeLocation,
moduleName: "Login",
initialProperties: mockData as! [AnyHashable : Any] ,
launchOptions: nil
)
这种形式需要预先打包内置 jsbundle 文件，否则地址为空无法加载。
在实际项目中我们使用 React Native 往往不会丢弃动态更新这个我们非常重视的优势，因此很多时候 jscorelocation 都不在 main bundle 里，以上代码仅作为示例，实际上大多数人都会在开始的时候把 bundle 里的文件拷贝到 documents 目录下，而笔者更喜欢使用辅助类去动态判断读取路径，let path2 = FilePathManager.getFilePath(forResource: "HomeData", ofType: "json")这样可以省去不必要的拷贝。
参考资料：
http://react-china.org/t/ios-rn/7670
https://segmentfault.com/a/1190000009977479
