仅在嵌套导航中的特定屏幕中隐藏BottomTabNavigaton tabBar（React Native）

Question

我需要在嵌套导航中隐藏 BottomTabNavigator tabBar，但仅在一个特定屏幕中。底部选项卡位于父选项卡中，这是一个示例：

const Stack = createNativeStackNavigator();

function HomeTabs() {
return (
<Stack.Navigator
screenOptions={{ headerShown: false, gestureEnabled: false }}
initialRouteName="Base">
<Stack.Screen name="Base" component={Home} />
<Stack.Screen name="Quizz" component={Quizz} />
</Stack.Navigator>
);
}

const Tab = createBottomTabNavigator();

export default function HomePages() {
return (
<View style={styles.container}>
<Tab.Navigator
initialRouteName="Home"
screenOptions={{ headerShown: false }}>
<Tab.Screen name="Home" component={HomeTabs} />
<Tab.Screen name="Account" component={Account} />
<Tab.Screen name="Communitaction" component={Communitaction} />
</Tab.Navigator>
</View>
);
}

我只需要在 {Quizz} Stack.Screen 中隐藏 BottomTabNavigator tabBar

我试过这个：

function TabsHome(){
   return (
     <Stack.Navigator
      screenOptions={{ headerShown: false, gestureEnabled: false }}       
      initialRouteName="Base">
    <Stack.Screen name="Base" component={Home} />       
    <Stack.Screen
     name="Quizz"
     component={Quizz}
     options={{ hideTabBar: true }} />
     </Stack.Navigator>   ); }

但由于是嵌套的，所以不会影响父导航器，

然后我问 ChatGPT buuuuuut :

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

// Context to manage the visibility of the bottom tab navigator
const TabVisibilityContext = createContext();

// Custom hook to update the visibility state of the bottom tab navigator
const useTabVisibility = () => useContext(TabVisibilityContext);

function HomeTabs() {
const isTabVisible = useTabVisibility();

return (
<Stack.Navigator
screenOptions={{ headerShown: false, gestureEnabled: false }}`
initialRouteName="Base">
<Stack.Screen name="Base" component={Home} />
<Stack.Screen name="Quizz" component={Quizz} options={{ tabBarVisible: !isTabVisible }} />
</Stack.Navigator>
);
}

export default function HomePages() {
const [isTabVisible, setTabVisible] = useState(true);

return (
<TabVisibilityContext.Provider value={isTabVisible}>
<View style={{ flex: 1 }}>
<Tab.Navigator
initialRouteName="Home"
screenOptions={{ headerShown: false }}
tabBarOptions={{ style: { display: isTabVisible ? 'flex' : 'none' } }}>
<Tab.Screen name="Home" component={HomeTabs} />
<Tab.Screen name="Account" component={Account} />
<Tab.Screen name="Communication" component={Communication} />
</Tab.Navigator>
</View>
</TabVisibilityContext.Provider>
);
}

是的，这一切都是白费的

Answer 1

你尝试过这样做吗？

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Notifications" component={Notifications} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeTabs} />
        <Stack.Screen name="Profile" component={Profile} />
        <Stack.Screen name="Settings" component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

该问题在此介绍：https://reactnavigation.org/docs/hiding-tabbar-in-screens/