出于各方面考量一般 React Native 不會(huì)制作大型組件碍扔，這意味著 React Native 不會(huì)制作完整 APP 或者占據(jù)軟件核心魏保，在這種情況下 React Native 在程序中處于組件狀態(tài)日川，因而在一個(gè) APP 中可能存在多個(gè)組件沛厨。
多組件情況下市面上有幾種處理方案：
第一種就是注冊(cè)多個(gè)組件
這樣會(huì)出現(xiàn)內(nèi)存消耗問題进胯。
第二種是只注冊(cè)一個(gè)組件
形式如下
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);
根據(jù)網(wǎng)上的測(cè)試數(shù)據(jù)像鸡，這種方式并沒有效率上的提升辫塌，并且這兩種方法都面臨一個(gè)問題漏策，就是 這兩種方案都是建立在 JS 端模塊都建立在同一個(gè)工程內(nèi)。
結(jié)合以上觀點(diǎn)臼氨，考慮到以模塊為單位的 React Native 很有可能是多個(gè)工程并行開發(fā)掺喻，計(jì)劃采用多個(gè) JSCoreLocation 的方式，也就是通過在原生端預(yù)定義地址储矩。
使用以下形式的代碼：
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
)
這種形式需要預(yù)先打包內(nèi)置 jsbundle 文件感耙，否則地址為空無法加載。
在實(shí)際項(xiàng)目中我們使用 React Native 往往不會(huì)丟棄動(dòng)態(tài)更新這個(gè)我們非常重視的優(yōu)勢(shì)持隧，因此很多時(shí)候 jscorelocation 都不在 main bundle 里即硼，以上代碼僅作為示例，實(shí)際上大多數(shù)人都會(huì)在開始的時(shí)候把 bundle 里的文件拷貝到 documents 目錄下屡拨，而筆者更喜歡使用輔助類去動(dòng)態(tài)判斷讀取路徑只酥，let path2 = FilePathManager.getFilePath(forResource: "HomeData", ofType: "json")這樣可以省去不必要的拷貝褥实。
參考資料：
http://react-china.org/t/ios-rn/7670
https://segmentfault.com/a/1190000009977479
