1

我有一个应用程序，它由带有 5 个屏幕的选项卡式导航组成，其中一个是两个屏幕的堆栈导航。在两个堆栈屏幕之一上，我想隐藏底部选项卡。我怎样才能做到这一点 ？

我已经检查了React Navigation V5 隐藏底部选项卡，但是当我尝试使用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>
  );
}
4

0 回答 0