尝试隐藏底部选项卡导航的反应导航问题

Question

当我导航到消息室屏幕时，我试图隐藏底部选项卡，我尝试使用模式，但无法让它工作......下面是我的代码，如果我得到一些帮助，我将不胜感激

这是我的根导航

  return (

    <NavigationContainer

      theme={colorScheme === 'dark' ? DarkTheme : DefaultTheme}

    >

      <RootNavigator />

    </NavigationContainer>

  );

}

const Stack = createStackNavigator();

function RootNavigator() {

  return (

    <Stack.Navigator screenOptions={{ headerShown: false }}>

      <Stack.Screen name='Root' component={BottomTabNavigator} />

    </Stack.Navigator>

  );

}

下面也是底部选项卡导航

export default function BottomTabNavigator() {

  const colorScheme = useColorScheme();

  return (

    <BottomTab.Navigator

      initialRouteName='Listing'

      tabBarOptions={{

        activeTintColor: Colors[colorScheme].tint,

        showLabel: false,

      }}

    >

      <BottomTab.Screen

        name='Messages'

        component={TabtwoNavigator}

        options={{

          tabBarIcon: ({ color }) => (

            <Ionicons name='ios-chatboxes' color={color} size={30} />

          ),

        }}

      />

      <BottomTab.Screen

        name='MyListing'

        component={TabFourNavigator}

        options={{

          tabBarIcon: ({ color }) => (

            <Ionicons name='ios-albums' color={color} size={30} />

          ),

        }}

      />

    </BottomTab.Navigator>

  );

}

下面是其中一个选项卡导航器的示例

function TabtwoNavigator() {

  return (

    <TabTwoStack.Navigator>

      <TabTwoStack.Screen name='Messages' component={MessagesScreen} />

      <TabTwoStack.Screen name='MessagesRoom' component={MessagesRoomScreen}/>

    </TabTwoStack.Navigator>

  );

}

Answer 1

如果您将 放置MessagesRoomScreen在 BottomTab 导航器中，选项卡将始终显示。解决方法可以是这样的function RootNavigator() {&nbsp; return (&nbsp; &nbsp; <Stack.Navigator screenOptions={{ headerShown: false }}>&nbsp; &nbsp; &nbsp; .....&nbsp; &nbsp; &nbsp; <!-- Add `MessagesRoom` screen here in parent navigator and remove from `TabtwoNavigator` -->&nbsp; &nbsp; &nbsp; <Stack.Screen name='MessagesRoom' component={MessagesRoomScreen}/>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; </Stack.Navigator>&nbsp; );}