如何在React Native中结合动态路由和静态路由

Question

我正在创建一个本机反应向导，并且希望将我的静态路由和向导动态路由结合起来。

当前，我正在使用反应导航，主要的问题是我有一个generateNavigator函数，该函数根据传递给存在该功能的Route.js组件的道具创建动态路线。我尝试将函数移动到存在静态路由的AppNavigator处，但导航器必须是一个函数。我正在运行应用程序博览会

Route.js

generateNavigator = () => {
  const { steps, title } = this.props;
  const navigationRoutes = {};
  steps.forEach((step, index) => {
    const routeOptions = { screen: step.component };
    navigationRoutes[step.routeName] = routeOptions;
  });

  const navigationOptions = {
    headerStyle: {
      backgroundColor: '#ffffff',
      paddingHorizontal: 5,
    },
    headerTintColor: '#111111',
    headerTitle: title,
  };

  return createAppContainer(createStackNavigator(navigationRoutes, { navigationOptions }));
}

AppNavigator.js

const MainStack = createStackNavigator(
  {
    Main: {
      screen: {
        MainTabNavigator,
      },
    },
    ...ModalStack
  },
  {
    mode: 'modal',
    headerMode: 'none',
  }
);


export default createAppContainer(
  createSwitchNavigator({
    AuthLoading: AuthLoading,
    Main: MainStack,
    Auth: AuthStack,
  }, {
    initialRouteName: 'AuthLoading',
  })
);

我希望该应用程序在运行时不会发出警告，但相反，我收到一条警告：“您应仅在应用程序中显式呈现一个导航器”。如前所述，我尝试将generateNavigator()移至AppNavigator来解决问题，但没有成功。