React Native 混合開發多入口加載方式

在已有app混合開發時，可能會有多個rn界面入口的需求，這個時候咱們能夠使用RCTRootView中的moduleName或initialProperties來實現加載包中的不一樣頁面。

目前使用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這樣的導航組件搭配使用，下面貼出的代碼就是結合路由的實現方案。

screenProps是react-navigation中專門用於傳遞給React組件數據的屬性，createAppContainer建立的組件接受該參數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 混合開發多入口加載方式