如何隐藏模态屏幕底部栏？

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

从

addStuff

的屏幕之一呈现

HomeStack

模态屏幕在 iOS 上按预期工作：底部栏不显示。但在 Android 上，底部栏仍然存在...

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

有人知道如何告诉反应导航不要在此模式屏幕上添加此底部栏吗？

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

Answer 2

这对我有用。

由于模态屏幕是一个屏幕，所以它与我们不想在屏幕中显示底部栏是一样的。所以我们只是从 _layout.tsx 文件中隐藏它。

_layout.tsx

  <Tabs
      screenOptions={{
        tabBarStyle: {
          display:
            usePathname() === '/path/to/modalScreen' ? 'none' : 'flex',
        },
      }}
      initialRouteName="home"
    >...
    /Tabs>