React Navigation v5如何从堆栈屏幕隐藏选项卡

Question

我有一个应用程序，其中包含5个屏幕的选项卡式导航，其中之一是两个屏幕的堆栈导航。在两个堆栈屏幕之一中，我想隐藏底部的选项卡。我该怎么办？

我已经检查了React Navigation V5 Hide Bottom Tabs，但是当我尝试使用navigation.setOptions({ tabBarVisible: false })时，它更改了堆栈导航器的选项，而不是选项卡。

这是我的代码

// Screen where I want to hide the BottomTabNavigator
function StackSecondScreen({ navigation }) {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "indianred"
      }}
    >
      <Text>StackSecondScreen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function TabFirstScreen({ navigation }) {
  return (
    <Stack.Navigator initialRouteName="StackFirst">
      <Stack.Screen
        name="StackFirst"
        component={StackFirstScreen}
        options={{
          headerShown: false
        }}
      />
      <Stack.Screen name="StackSecond" component={StackSecondScreen} /> // <== Screen where I want to hide the BottomTabNavigator
    </Stack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="First">
        <Tab.Screen name="TabFirst" component={TabFirstScreen} /> 
        <Tab.Screen name="TabSecond" component={TabSecondScreen} />
        <Tab.Screen name="TabThird" component={TabThirdScreen} />
        <Tab.Screen name="TabFourth" component={TabFourthScreen} />
        <Tab.Screen name="TabFifth" component={TabFifthScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}