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

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>
  )
}