React Native 混合開發(fā)多入口加載方式詳解
在已有app混合開發(fā)時(shí)，可能會(huì)有多個(gè)rn界面入口的需求，這個(gè)時(shí)候我們可以使用RCTRootView中的moduleName或initialProperties來實(shí)現(xiàn)加載包中的不同頁面。
目前使用RCTRootView有兩種方式：
- 使用initialProperties傳入props屬性，在React中讀取屬性，通過邏輯來渲染不同的Component
- 配置moduleName，然后AppRegistry.registerComponent注冊(cè)同名的頁面入口
這里貼出使用0.60.5版本中ios項(xiàng)目的代碼片段：
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
moduleName:@"AwesomeProject"
initialProperties: @{
@"screenProps" : @{
@"initialRouteName" : @"Home",
},
}];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
return YES;
}
initialProperties
這種方式簡單使用可以通過state判斷切換界面，不過項(xiàng)目使用中還是需要react-navigation這樣的導(dǎo)航組件搭配使用，下面貼出的代碼就是結(jié)合路由的實(shí)現(xiàn)方案。
screenProps是react-navigation中專門用于傳遞給React組件數(shù)據(jù)的屬性，createAppContainer創(chuàng)建的組件接受該參數(shù)screenProps，并傳給訪問的路由頁面。
class App extends React.Component {
render() {
const { screenProps } = this.props;
const stack = createStackNavigator({
Home: {
screen: HomeScreen,
},
Chat: {
screen: ChatScreen,
},
}, {
initialRouteName: screenProps.initialRouteName || 'Home',
});
const AppContainer = createAppContainer(stack);
return (
<AppContainer
screenProps
/>
);
}
}
moduleName
我們按照下面代碼注冊(cè)多個(gè)頁面入口之后，就可以在原生代碼中指定moduleName等于AwesomeProject或者AwesomeProject2來加載不同頁面。
AppRegistry.registerComponent("AwesomeProject", () => App);
AppRegistry.registerComponent("AwesomeProject2", () => App2);
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解React項(xiàng)目的服務(wù)端渲染改造(koa2+webpack3.11)
本篇文章主要介紹了詳解React項(xiàng)目的服務(wù)端渲染改造(koa2+webpack3.11)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
react使用antd-design中select不能及時(shí)刷新問題及解決
這篇文章主要介紹了react使用antd-design中select不能及時(shí)刷新問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
React組件對(duì)子組件children進(jìn)行加強(qiáng)的方法
這篇文章主要給大家介紹了關(guān)于React組件中對(duì)子組件children進(jìn)行加強(qiáng)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用React具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要為大家介紹了React 狀態(tài)的不變性實(shí)例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
本文主要介紹了說說react中引入css的方式有哪些并區(qū)別在哪，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
下面小編就為大家?guī)硪黄獪\談react+es6+webpack的基礎(chǔ)配置。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要為大家介紹了Modal.confirm是否違反了React模式分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
使用react+redux實(shí)現(xiàn)計(jì)數(shù)器功能及遇到問題
使用redux管理數(shù)據(jù)，由于Store獨(dú)立于組件，使得數(shù)據(jù)管理獨(dú)立于組件，解決了組件之間傳遞數(shù)據(jù)困難的問題，非常好用，今天重點(diǎn)給大家介紹使用react+redux實(shí)現(xiàn)計(jì)數(shù)器功能及遇到問題，感興趣的朋友參考下吧2021-06-06
IntersectionObserver實(shí)現(xiàn)加載更多組件demo
這篇文章主要為大家介紹了IntersectionObserver實(shí)現(xiàn)加載更多組件demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
React Native 真機(jī)斷點(diǎn)調(diào)試+跨域資源加載出錯(cuò)問題的解決方法
下面小編就為大家分享一篇React Native 真機(jī)斷點(diǎn)調(diào)試+跨域資源加載出錯(cuò)問題的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01