Question

我想将react-navigation库V2更新为V3，并更改部分代码，以为不会出现任何问题，但是事实证明我在创建带有createDrawerNavigator类型屏幕的createStackNavigator时遇到了问题createBottomTabNavigator。

我与先前版本兼容的代码是：

export const createRootNavigator = (signedIn = false) => {
  const commonNavigationOptions = {
    headerStyle: {
      shadowColor: 'transparent',
      elevation: 0
    },
    headerTintColor: DEFAULT_THEME.topaz
  };

  const SignedIn = createStackNavigator(
    {
      Home: {
        screen: Drawer('Home'),
        navigationOptions: () => ({
          headerStyle: {
            height: 0
          },
          header: getSafeArea(DEFAULT_THEME.backgrouncolorHomeSafeArea)
        })
      },
      Cards: {
        screen: Tabs('Cards'),
        navigationOptions: () => ({
          headerStyle: {
            height: 0
          }
        })
      },
   );

const SignedOut = createStackNavigator(
    {
      SignIn: {
        screen: LoginContainer,
        navigationOptions: () => ({
          headerStyle: {
            height: 0
          },
          header: getSafeArea(DEFAULT_THEME.dark)
        })
      },
      SelectableCardsList: { screen: SelectableCardsListComponent },
);

  return createSwitchNavigator(
    {
      SignedIn: { screen: SignedIn },
      SignedOut: { screen: SignedOut }
    },
    {
      initialRouteName: signedIn ? 'SignedIn' : 'SignedOut'
    }
  );
};


const Drawer = (initialRoute) => createDrawerNavigator(
  {
    Home: { screen: Tabs('Home') },

  {
    initialRouteName: initialRoute,
    contentComponent: CustomDrawerComponent
  }
);

const Tabs = (initialRouteName) => createBottomTabNavigator(
  {
    Home: {
      screen: HomeContainer,
      navigationOptions: {
        tabBarLabel: I18n.t('tabs.me')
      }
    },
    Home2: {
      screen: Home2,
      navigationOptions: {
        tabBarLabel: I18n.t('tabs.credentials')
      }
 },
  {
    initialRouteName: initialRouteName,
    tabBarComponent: ({ navigation }) => <CustomBottomBarComponent navigation={navigation} navigationState={navigation['state']} />,
    tabBarOptions: {
      style: {
        backgroundColor: 'white'
      }
    }
  }
);

使用react-navigation V3尝试此解决方案，并向我发送错误消息

我尝试以下操作：将createSwitchNavigator封装在createAppContainer中，并从createSwitchNavigator中分离出（SignedOut和SignedOut）createStackNavigator，其余部分仍然相同。

export const createRootNavigator = (signedIn = false) => createAppContainer(createSwitchNavigator(
    {
        SignedIn: { screen: SignedIn },
        SignedOut: { screen: SignedOut }
    },
    {
        initialRouteName: signedIn ? 'SignedIn' : 'SignedOut'
    }
));

我收到以下错误：路线“ Home”的组件必须是React组件。例如

从“ ./MyScreen”导入MyScreen； ... 主页：MyScreen， } 您还可以使用导航器：问题位于此部分：

const SignedIn = createStackNavigator(
    {
        Home: {
            screen: Drawer,

也可以尝试更改任何组件（具有空白屏幕的组件）的抽屉，这是可行的，但是我无法在抽屉中插入选项卡。

非常感谢您的帮助。

将react-navigation v2更新为v3时，我的代码存在问题

0 个答案: