React Navigation V5 在特定屏幕中隐藏底部选项卡

Question

我正在使用 React Navigation 版本 5 创建一个 React Native 应用程序，并且我有一个底部选项卡导航器，其中一个堆栈导航器嵌套在选项卡导航器的每个屏幕内。我只希望底部标签栏显示在每个堆栈导航器的第一页上。这是一个显示我的应用程序基本导航功能的小吃：https://snack.expo.io/@brforest/hide-tab-1。根据bottom tab documentation，有一个 tabBarVisible 选项属性，但是：

隐藏标签栏可能会导致故障和跳跃行为。我们建议将选项卡导航器放在堆栈导航器中。

在堆栈导航器中嵌套选项卡导航器的指南是here。我尝试使用这种方法，但如果我只有一个堆栈导航器，我只能让它工作，但我需要为每个选项卡屏幕都有一个堆栈导航器。这是我（不成功）尝试在上一个小吃的同一个应用程序上使用此方法：https://snack.expo.io/@brforest/hide-tab-2。在此，我在单个堆栈导航器中嵌套了多个选项卡导航器，以尝试推断文档中建议的方法。正如您在本篇文章中看到的，堆栈中的导航不再起作用，但选项卡仍然起作用。

对我来说，将堆栈导航器嵌套在选项卡导航器中（就像我在第一个零食中所做的那样）比尝试将相同的选项卡导航器嵌套在大型堆栈导航器中更有意义。但是，我想遵循文档并找到一种不会导致“故障和跳跃行为”的方法。关于如何实现所需导航功能的任何建议？

谢谢！

Answer 1

上网后，我找到了自己的方法来隐藏特定堆栈屏幕中的底部选项卡。

export default function SignStack({ navigation, route }) {

   useEffect(() => {
    if (route.state?.index) {
      navigation.setOptions({
        tabBarVisible: false,
      });
    } else {
      navigation.setOptions({
        tabBarVisible: true,
      });
    }
  }, [navigation, route.state?.index]);



return <Stack.Navigator> ... </Stack.Navigator>

}

这将只显示第一个堆栈屏幕上的底部选项卡。

2020 年 11 月 17 日更新

使用getFocusedRouteNameFromRoute 隐藏底部标签，此示例仅在Auth 和Settings 屏幕上显示底部标签。

  const routeName = getFocusedRouteNameFromRoute(route) ?? 'Auth';

  useEffect(() => {
    navigation.setOptions({
      tabBarVisible: ['Auth', 'Settings'].includes(routeName),
    });
  }, [navigation, routeName]);

为什么不是第一个解决方案 TLDR

以上解决方案根据渲染隐藏屏幕底部标签route.state.index 如果您有平行导航路线，则可以使用上述解决方案。

假设您有两个选项卡导航用户堆栈和主页堆栈，并且在用户堆栈上您有两个屏幕配置文件和设置，如果您想隐藏设置屏幕上的底部栏，您将使用上述解决方案，它工作正常但是当您直接从主页导航到用户设置屏幕时，底部选项卡栏会显示在设置屏幕上并隐藏在配置文件屏幕上，这是因为设置屏幕的route.state.index 是0 而配置文件屏幕是1。

Answer 2

就像您提到的，如果您只希望每个堆栈中的第一个屏幕显示底部标签栏，那么我建议您使用第二种方法。创建一个基本堆栈导航器，第一个屏幕是选项卡导航器本身：

const TabScreens = ({navigation}) => { // Tab navigator with only the screens that require bottom tab bar
  return (
    <Tab.Navigator
      initialRouteName="Home"
      tabBarOptions={{
        activeTintColor: '#e91e63',
      }}>
      <Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: 'Home',
        }}
      />
      <Tab.Screen
        name="Welcome"
        component={Welcome}
        options={{
          tabBarLabel: 'Welcome',
        }}
      />
    </Tab.Navigator>
  );
};

创建标签导航器后，在主渲染器中使用：

    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Stack"
          component={TabScreens}
        />
        <Stack.Screen             // Add any number of extra screens that do not require the bottom tab here
         name="Other screen 1"
         component={OtherScreen1} />
        <Stack.Screen             
         name="Other screen 2"
         component={OtherScreen2} />
      </Stack.Navigator>
    </NavigationContainer>

这样您就不必摆弄底部选项卡组件。您还可以在属于基本堆栈导航器的任何屏幕和属于选项卡导航器的任何屏幕之间导航。这里唯一需要注意的是，除了选项卡导航器中的屏幕之外的所有屏幕都会在您每次导航到那里和返回时安装和卸载。

Answer 3

简单的方法

  options={{
        tabBarVisible: false,
      }}