Question

背景

很简单的问题，真的，我为我的应用设计了一个底部标签导航器，它只显示 5 个图标/按钮。我需要在几乎每个屏幕上都显示该导航。

问题

这是我的应用程序结构：

<NavigationContainer> 
  <Stack.Navigator initialRouteName={user ? 'Home' : 'Login'}
    screenOptions={{cardStyle: { backgroundColor: '#FFFFFF' }}}> 
    <Stack.Screen name="Home"options={{headerShown: false}}> 
      {props => <TabNav {...props} extraData={user} />} 
    </Stack.Screen> 
    <Stack.Screen name="Login" component={LoginScreen} options={{headerShown: false}}/> 
    <Stack.Screen name="RegistrationMethod" component={RegistrationMethod} options={{headerShown: false}}/>
    <Stack.Screen name="TermsScreen" component={TermsScreen}  options={{headerShown: false}}/> 
    <Stack.Screen name="Registration" component={RegistrationScreen}  options={{headerShown: false}}/> 
    <Stack.Screen name="Detail" options={{title: ''}} component={BarDetail}/> 
    <Stack.Screen name="Profile" options={{headerShown: false}}>
      {props => <ProfileScreen {...props} extraData={user} />}
    </Stack.Screen>
    <Stack.Screen name="personalDetails" options={{title: 'Perfil'}}>
      {props => <PersonalDetails {...props} extraData={user} />}
    </Stack.Screen>
    <Stack.Screen name="config" component={ConfigScreen} options={{title:'Configuración'}}/>
    <Stack.Screen name="menu" component={MenuScreen} options={{headerShown: false}}/>
    <Stack.Screen name="checkoutStart" component={checkoutStart} options={{title: 'Tu compra'}}/>
    <Stack.Screen name="checkoutII" component={checkoutII} options={{title: 'Tu compra'}}/>
    <Stack.Screen name="reviewScreen" component={ReviewScreen} options={{title: 'Tu opinión'}}/>
    <Stack.Screen name="searchScreen" component={TabNav} options={{headerShown: false}}/>
  </Stack.Navigator> 
</NavigationContainer>


<Tab.Navigator initialRouteName={user ? 'Home' : 'Login'} tabBarOptions={{showLabel: false}}
    screenOptions={{showLabel: false, cardStyle: { backgroundColor: '#FFFFFF' }}} sceneContainerStyle={{backgroundColor: 'white'}}>
      <Tab.Screen name="Home" options={{
            tabBarIcon: ({size,focused,color}) => {
              if (focused) {
                return (
                  <SelectedHome/>)
              } else {
                return (
                  <LinearHome/>)
              }
              ;},}}
          >
        {props => <HomeScreen {...props} extraData={user} />} 
      </Tab.Screen> 
      <Tab.Screen name="Fav" component={FavScreen} options={{
            tabBarIcon: ({size,focused,color}) => {
          
                return (
                  <LinearFav/>)
              
              ;},}}
              />
      <Tab.Screen name="Search" component={SearchScreen} options={{
            tabBarIcon: ({size,focused,color}) => {
              if (focused) {
                return (
                  <SelectedSearch/>)
              } else {
                return (
                  <LinearSearch/>)
              }
              ;},}}/>
      <Tab.Screen name="Notifications" component={NotificationsScreen} options={{
            tabBarIcon: ({size,focused,color}) => {
              if (focused) {
                return (
                  <SelectedNotifications/>)
              } else {
                return (
                  <LinearNotifications/>)
              }
              ;},}}/>
      <Tab.Screen name="HelpScreen" component={HelpScreen} options={{
            tabBarIcon: ({size,focused,color}) => {
              if (focused) {
                return (
                  <SelectedHelp/>)
              } else {
                return (
                  <LinearHelp/>)
              }
              ;},}}/>
    </Tab.Navigator>

所以我需要 Tab Navigator，因为它可以显示在堆栈导航器的大多数屏幕中。我想改变它，使其全部标签和堆栈，但这不会造成混乱并将页脚中的每个屏幕都显示为可触摸吗？

问题

我怎样才能让标签导航器只在其他屏幕上显示那些图标？（注意解决方案要考虑到它必须能够隐藏在某些特定屏幕中。）

Answer 1

如果您想在某些屏幕上显示底部标签导航器，那么您应该将这些屏幕放在 <Stack.Navigator /> 中，并将 <Stack.Navigator /> 放在 <Tab.Navigator /> 中。

此处有更多详细信息：https://reactnavigation.org/docs/tab-based-navigation#a-stack-navigator-for-each-tab

在每个屏幕中显示底部选项卡导航器

1 个答案: