There may be multiple rn interface entry requirements in existing app hybrid development, at which time we can use moduleName or initial Properties in RCTRootView to implement different pages in the load package.

RCTRootView is currently used in two ways:

• Input props attributes using initial Properties, read attributes in React, and render different Component s through logic
• Configure moduleName, and then AppRegistry.registerComponent registers the page entry with the same name

Here is a code snippet that uses the ios project in version 0.60.5:

- (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

This method can be used to judge the switching interface simply by state, but the navigation components such as react-navigation are still needed in the use of the project. The code posted below is the implementation scheme combined with routing.

ScreProps is a property in react-navigation that is specifically used to pass data to React components. The component created by createAppContainer accepts the parameter screenProps and passes it to the accessed routing page.

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

After registering multiple page entries according to the following code, we can specify in the native code that moduleName equals AwesomeProject or AwesomeProject 2 to load different pages.

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

This article is published on the author's blog at the same time: React Native Hybrid Development Multi-entry Loading Mode