更新2020年11月17日

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>

这样，您就不必摆弄底部的标签组件。您还可以在基本堆栈导航器一部分和Tab导航器一部分的任何屏幕之间进行导航。唯一需要注意的是，每次您在此导航时，除了选项卡导航器中的屏幕外，所有屏幕都将被安装和卸载。

Answer 3

简单的方法

  options={{
        tabBarVisible: false,
      }}

在特定屏幕中反应导航V5隐藏底部选项卡

3 个答案:

更新2020年11月17日