时间戳

首页 > 解决方案 > 如何在特定屏幕中隐藏标签栏？

react-native - 如何在特定屏幕中隐藏标签栏？

问题描述

在我的 react-native 应用程序中，我有一个标签栏。每个选项卡都是不同的堆栈。在其中一个堆栈中有一个屏幕，我想为其隐藏选项卡导航器。我试图在上述屏幕上做类似的事情：

  useLayoutEffect(() => {
    const routeName = getFocusedRouteNameFromRoute(route);
    console.log(`routeName = ${routeName}`);
    if (routeName === "ScreenName"){
        navigation.setOptions({tabBarVisible: false});
    }else {
        navigation.setOptions({tabBarVisible: true});
    }
}, [navigation, route]);

但是我收到一条错误消息：

Argument of type '{ tabBarVisible: boolean; }' is not assignable to parameter of type 'Partial<StackNavigationOptions>'.
  Object literal may only specify known properties, and 'tabBarVisible' does not exist in type 'Partial<StackNavigationOptions>'.

如何正确隐藏特定屏幕上的标签栏？

标签： react-nativereact-navigation

解决方案

关于 React Navigation v5/v6

假设有两个选项卡。每个选项卡都包含堆栈屏幕。让我们为第一个选项卡调用“tab1”，为第二个选项卡调用“tab2Stack”。

在第二个选项卡上，首先需要使用以下代码段获取父级

const parent = navigation.getParent();

然后我们可以tabBarStyle使用parent.setOptions()以下代码段进行设置

parent.setOptions({
        tabBarStyle: {
              position: "absolute",
              bottom: -(SCREEN_HEIGHT * 0.112), // adjust the size according to your tab bar height
              height: SCREEN_HEIGHT * 0.112,
              paddingTop: 20,
            },
      });

这是一份完整的工作博览会小吃。

如果世博小吃没有运行，那么只需下载并在您的机器上运行它。

推荐阅读