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

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 Navigator 中，选项卡将始终显示。 解决方法可以像

function RootNavigator() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      .....
      <!-- Add `MessagesRoom` screen here in parent navigator and remove from `TabtwoNavigator` -->
      <Stack.Screen name='MessagesRoom' component={MessagesRoomScreen}/>    
    </Stack.Navigator>
  );
}