如何在模态屏幕上隐藏底栏？

Question

我有一个带有底栏的应用程序，我想从其中一个没有底部选项卡的情况下显示模态屏幕。我不明白为什么它在 iOS 上按预期工作但在 Android.

上却没有

这是我的底部标签导航器，其中包含我所有的标签：

// AppStack.tsx

const Tab = createBottomTabNavigator()

const AppStack = () => {
  return (
    <Tab.Navigator initialRouteName="homeStack" >
      <Tab.Screen name="homeStack" component={HomeStack} />
      ...
    </Tab.Navigator>
  )
}

这里是堆栈导航器，它包含多个屏幕，但也包含一个应该以模态方式呈现的屏幕（因此没有底栏）。

// HomeStack.tsx

const Stack = createNativeStackNavigator()

const HomeStack = () => {
  return (
    <Stack.Navigator initialRouteName="home">
      <Stack.Screen name="home" component={HomeScreen} />
      ...

      <Stack.Screen
        name="addStuff"
        component={StuffStack}
        options={{
          presentation: 'fullScreenModal',
        }}
      />

    </Stack.Navigator>
  )
}

从 HomeStack 的屏幕之一显示 addStuff 模式屏幕按预期在 iOS 上工作：底部栏未显示。但是在 Android 上，底栏仍然存在...

// HomeScreen.tsx
navigation.navigate('addStuff')

有没有人知道如何告诉 react-navigation 不要在这个模式屏幕上添加这个底栏？

Answer 1

您可以创建条件规则来检查屏幕名称。

为此，您需要获取导航道具（存在于您的 HomeStack 上）并使用 getFocusedRouteNameFromRoute 方法获取当前屏幕名称：

import {getFocusedRouteNameFromRoute} from '@react-navigation/native';
// rest of the codes ...

const HomeStack = ({route, navigation}) => {

  React.useLayoutEffect(() => {
    const routeName = getFocusedRouteNameFromRoute(route);
    if (routeName === 'addStuff') {
      navigation.setOptions({tabBarVisible: false});
    } else {
      navigation.setOptions({tabBarVisible: true});
    }
  }, [navigation, route]);

  return (
    <Stack.Navigator initialRouteName="home">
      <Stack.Screen name="home" component={HomeScreen} />
      // rest of the codes ...
      <Stack.Screen
        name="addStuff"
        component={StuffStack}
        options={{
          presentation: 'fullScreenModal',
        }}
      />
    </Stack.Navigator>
  )
}

如何在模态屏幕上隐藏底栏？

How to hide bottom bar on modal screen?

react-native

react-navigation