React Native混合開發(fā)多入口加載方式的示例分析

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

在已有app混合開發(fā)時，可能會有多個rn界面入口的需求，這個時候我們可以使用RCTRootView中的moduleName或initialProperties來實(shí)現(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這樣的導(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

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

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

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