小編給大家分享一下React Native混合開發(fā)多入口加載方式的示例分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

10年積累的成都網(wǎng)站建設(shè)、網(wǎng)站制作經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有新建免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

在已有app混合開發(fā)時，可能會有多個rn界面入口的需求，這個時候我們可以使用RCTRootView中的moduleName或initialProperties來實現(xiàn)加載包中的不同頁面。

目前使用RCTRootView有兩種方式：

• 使用initialProperties傳入props屬性，在React中讀取屬性，通過邏輯來渲染不同的Component

• 配置moduleName，然后AppRegistry.registerComponent注冊同名的頁面入口

這里貼出使用0.60.5版本中ios項目的代碼片段：

- (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判斷切換界面，不過項目使用中還是需要react-navigation這樣的導航組件搭配使用，下面貼出的代碼就是結(jié)合路由的實現(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

我們按照下面代碼注冊多個頁面入口之后，就可以在原生代碼中指定moduleName等于AwesomeProject或者AwesomeProject2來加載不同頁面。

AppRegistry.registerComponent("AwesomeProject", () => App);
AppRegistry.registerComponent("AwesomeProject2", () => App2);

以上是“React Native混合開發(fā)多入口加載方式的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

本文題目：ReactNative混合開發(fā)多入口加載方式的示例分析
網(wǎng)站網(wǎng)址：http://chinadenli.net/article0/ppceoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站導航、微信小程序、電子商務(wù)、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)