Question

我正在使用react-navigation来路由我的react-native应用程序。我正在使用交换机导航器进行身份验证流程。用户登录后，有五个底部选项卡。我在主堆栈导航器底部的标签栏导航器内部嵌套了堆栈导航器。在其中一个标签中，我有一个用于注册“用户名”的屏幕，然后转到社区屏幕。使用我当前的路线，如果用户创建了“用户名”，则将其重定向到第二个屏幕，但是如果按回车键，则将它们再次重定向到注册屏幕。如何管理路由？

const AppStack = createStackNavigator({
  AppTabsScreen: {
    screen: createBottomTabNavigator ({
      HomeTab: { 
        screen: createStackNavigator ({
          HomeScreen: { screen: Home },
          ArticleScreen: { screen: Article },
          AllArticleScreen: { screen: AllArticle },
          WebViewScreen: { screen: WebScreen },
          ShareScreen: { screen: ShareScreen },
          UsernameSignUpScreen: UsernameSignUp,
       },
       {
        initialRouteName: 'HomeScreen',
      })
      },
      LocationTab: { 
        screen: createStackNavigator({
          UsernameSignUpScreen: UsernameSignUp,
          Location: NearbyLocation,
          WebViewScreen: { screen: WebScreen },
          ShareScreen: { screen: ShareScreen },
          CommunityPageScreen: { screen: CommunityPage },
        },
        {
          initialRouteName: 'UsernameSignUpScreen',
        })
      },
      AssistantTab: { 
        screen: createStackNavigator ({
          AssistantScreen: { screen: Assistant },
          BrandInfoScreen: { screen: BrandInfo },
          WebViewScreen: { screen: WebScreen },
          ShareScreen: { screen: ShareScreen },
          FilterBrandScreen: { screen: FilterBrandComponent },
          SearchScreen: { screen: SearchProducts },
        },
        {
          initialRouteName: 'AssistantScreen',
        }) 
      },
      CTab: {
        screen: createStackNavigator({ 
          CScreen: { screen: CScreen },
          SearchScreen: { screen: SearchProducts },
          BrandContainerScreen: { screen: BrandContainer },
          BrandInfoScreen: { screen: BrandInfo },
          AllProductsScreen: { screen: AllProducts },
          },
          {
            initialRouteName: 'CScreen',
      }),
    },
      ProfileTab: { 
        screen: createStackNavigator({
          ProfileScreen: { screen: Profile },
          ShareScreen: { screen: ShareScreen },
          WebViewScreen: { screen: WebScreen },
          ArticleScreen: { screen: Article },
          AllArticleScreen: { screen: AllArticle },
          UserExperienceScreen: { screen: UserExperience },
        },
          {
            initialRouteName: 'ProfileScreen',
          }),
      }
    }, {
      initialRouteName: 'HomeTab',
      order: ['HomeTab', 'LocationTab', 'AssistantTab', 'CTab', 'ProfileTab'],
      animationEnabled: true,
      defaultNavigationOptions: ({ navigation }) => ({
        tabBarLabel: () => {
          const { routeName } = navigation.state;
          let tLabel;
          if (routeName === 'HomeTab') {
            tLabel = 'Home';
            return <Text style={{ textAlign: 'center', fontSize: wp(2.7), fontFamily:'OpenSans-SemiBold',}}>{tLabel}</Text>;
          } else if (routeName === 'LocationTab') {
            tLabel = 'Community';
            return <Text style={{ textAlign: 'center', fontSize: wp(2.7), fontFamily:'OpenSans-SemiBold',}}>{tLabel}</Text>;
          } else if (routeName === 'CTab') {
            tLabel = 'Explore';
            return <Text style={{ textAlign: 'center', fontSize: wp(2.7), fontFamily:'OpenSans-SemiBold',}}>{tLabel}</Text>;
          } else if (routeName === 'AssistantTab') {
            tLabel = 'Risk';
            return <Text style={{ textAlign: 'center', fontSize: wp(2.7), fontFamily: 'OpenSans-SemiBold', }}>{tLabel}</Text>;
          } else if (routeName === 'ProfileTab') {
            tLabel = 'Profile';
            return <Text style={{ textAlign: 'center', fontSize: wp(2.7), fontFamily:'OpenSans-SemiBold',}}>{tLabel}</Text>;
          }
        },
        tabBarIcon: ({ tintColor }) => {
          const { routeName } = navigation.state;
          let iconName;
          if (routeName === 'HomeTab') {
            iconName = `home`;
            return <IconComponent name={iconName} size={wp(8)} color={tintColor} />
          } else if (routeName === 'LocationTab') {
            iconName = `globe`;
            return <IconComponent name={iconName} size={wp(8)} color={tintColor} />
          } else if (routeName === 'AssistantTab') {
            iconName = `Logo`;
            return <IconComponent name={iconName} size={wp(8)} color={tintColor} />
          } else if (routeName === 'CTab') {
            iconName = `Library`;
            return <IconComponent name={iconName} size={wp(8)} color={tintColor} />
          } else if (routeName === 'ProfileTab') {
            iconName = `user`;
            return <IconComponent name={iconName} size={wp(8)} color={tintColor} />
          }
          //return <IconComponent name={iconName} size={wp(8)} color={tintColor} />;
        },
      }),
      tabBarOptions: {
          activeTintColor: '#000',
          inactiveTintColor: '#7f8c8d',
          activeBackgroundColor: '#FAFAFA',
          inactiveBackgroundColor: '#FAFAFA',
          style: {height: hp(8.5)},
          showLabel: true,
          showIcon: true,
          keyboardHidesTabBar: true
      }
    })
  }
},{
    initialRouteName: 'AppTabsScreen',
    headerMode: 'none',
    navigationOptions: {
      header: null
    }
})

我希望第二个选项卡中的路由即如果用户具有用户名，则单击LocationTab后应将其重定向到LocationTab中的“ CommunityPageScreen”，否则，该路由应以“ UsernameSignUpScreen”开头。

Answer 1

通过将数据放入变量中来运行条件语句。

示例

      LocationTab: { 
        screen: createStackNavigator({
          UsernameSignUpScreen: UsernameSignUp,
          Location: NearbyLocation,
          WebViewScreen: { screen: WebScreen },
          ShareScreen: { screen: ShareScreen },
          CommunityPageScreen: { screen: CommunityPage },
        },
        {
          initialRouteName: userNameCheck === true ? 'CommunityPageScreen'  : 'UsernameSignUpScreen',
        })

如何使用反应导航进行条件路由？

1 个答案: