如何在 React Native 中隐藏特定屏幕上的底部导航栏？

Question

我正在使用 React Native 和 React Native Navigation 构建我的应用程序。目前，我有三个底部选项卡：主页、上传视频和消息。选择“上传视频”选项卡后，我想呈现“上传视频”组件并隐藏该屏幕上的底部选项卡，并显示 header 和 'Cancel'（将它们带回 HomeView）和 'Post' 按钮（这已经完成）。我很难在这个特定屏幕上隐藏标签栏。

我尝试按照此处的代码进行操作 ()；但是，最终没有成功，我无法通过这种方式隐藏任何屏幕上的底部选项卡。

目前，我将这个作为我的底部导航器：

const BottomTabNavigator = createBottomTabNavigator({
    HomeView: {
        screen: HomeView,
    },
    VideoView: {
        screen: VideoSelectionView
    },
    Messages: {
        screen: SearchView
    }
});

任何见解都将非常有帮助，谢谢。

Answer 1

您需要为每个需要隐藏标签栏的 TabBar 屏幕或堆栈指定，

const BottomTabNavigator = createBottomTabNavigator({
    HomeView: {
        screen: HomeView,
        navigationOptions:()=>{
          return {
            tabBarVisible:false,
          };
       }
    },
    VideoView: {
        screen: VideoSelectionView
    },
    Messages: {
        screen: SearchView
    }
});

Answer 2

由于 react-navigation 5 正在使用，上述解决方案不再有效。

对于React-Navigation5，参考。

Answer 3

在 v5 上，您可以使用函数和默认 arg 导航修改选项。:

<BottomTab.Screen
      name="Explore"
      component={Explore}
      options={({ navigation }) => {
        const { routes, index } = navigation.dangerouslyGetState();
        const { state: exploreState } = routes[index];
        let tabBarVisible = true;
        if (exploreState) {
          const { routes: exploreRoutes, index: exploreIndex } = exploreState;
          const exploreActiveRoute = exploreRoutes[exploreIndex];
          if (exploreActiveRoute.name === "RewardDetail") tabBarVisible = false;
        }
        return {
          tabBarVisible,
          title: "Explore",
          tabBarLabel: "Explore",
          tabBarIcon: ({ color, size }) => (
            <AntDesign name="search1" color={color} size={size} />
          ),
        };
      }}
    />

看我的回答：

Answer 4

就在屏幕上你想隐藏栏，设置tabBarVisible: false。

<Tab.Screen
    name="SignIn"
    component={SignInScreen}
    options={{
      tabBarVisible: false, //like this
      tabBarButton: (props) => null, //this is additional if you want to hide the tab element from the bottom nav
    }}
  />

Answer 5

在 React 导航 5+ 中，我使用以下方法在特定屏幕上隐藏标签栏，该屏幕位于标签屏幕的堆栈导航器内。在包含文件的选项卡导航器中，我创建了一个函数，然后使用将动态触发的函数设置选项属性。

function getIsTabBarShown(route) {
    const routeName = getFocusedRouteNameFromRoute(route) ?? routes.DASHBOARD;

    switch (routeName) {
        case routes.MEMBERDETAILS:
            return false;
        default:
            return true;
    }
}

当用户转到 MemberNavigator 堆栈内的 MemberDetails 页面时，此函数将 return 为 false。

<Tab.Screen 
    name="MemberTab"
    component={MemberNavigator}
    options={({ route }) => ({
        title: 'Members',
        tabBarVisible: getIsTabBarShown(route),
        tabBarIcon: ({ color, size }) =>
        <MaterialCommunityIcons name="account-group" color={color} 
   size={size} />
})} />

这里是官方文档以了解更多信息click here。

Answer 6

由于 provided solution by the docs 丝毫不起作用，因此我以前所未有的方式遍历互联网以找到解决此问题的方法。

我有以下导航设置：

底部标签
- A (NativeStack)
  - 1（屏幕）
  - 2（屏幕）
  - 3（屏幕）
- B (NativeStack)
- C (NativeStack)

我想隐藏屏幕 1 中的底部栏。最终成功的是相应屏幕中的以下代码片段：

useEffect(() => {
  navigation.getParent()?.setOptions({ tabBarStyle: { display: "none" });
  return () => navigation.getParent()?.setOptions({ tabBarStyle: undefined });
}, [navigation]);

当导航道具更新时效果是运行并且在屏幕打开后隐式更新。使用 getParent() 我得到底部选项卡导航器并可以使用 setOptions(...) 设置选项。要恢复底部选项卡，必须手动设置选项。我通过在 useEffect() 的调用中返回重置 tabBarStyle 的方法解决了这个问题。此调用是在需要清理时进行的，这意味着它会运行一旦屏幕被卸载。

希望这能让你们免于我必须经历的绝望。

Answer 7

单击 here

以参阅文档

Answer 8

在 React Navigation V6 中，在 tabBarStyle 下的选项中添加 display: none。添加tabBarButton: () => null,以禁用选项卡中的图标。

<Stack.Screen
    name="Add Product"
    component={AddProduct}
    options={() => ({
      tabBarStyle: {
        display: "none",
      },
      tabBarButton: () => null,
    })}
  />

Answer 9

仅将 tabBarStyle 设置为 none 对我不起作用，我还需要使用属性 tabBarVisible，如果使用钩子，您可以这样做：

export function useHideBottomBar() {
    const navigation = useNavigation();

    useEffect(() => {
        navigation.getParent()?.setOptions({ tabBarStyle: { display: 'none' }, tabBarVisible: false });
        return () =>
            navigation.getParent()?.setOptions({ tabBarStyle: undefined, tabBarVisible: undefined });
    }, [navigation]);
}

Answer 10

在搜索和尝试了很多方法之后，我将顶部元素View更改为Modal，然后隐藏了bottombar，因为modal可以是上底栏。它不是最好的，但仍然有用。

<View>
  //code block
</View> 

to->
         
<Modal animationType='fade' transparent={false} visible={true}>
   /code block
</Modal>

如何在 React Native 中隐藏特定屏幕上的底部导航栏？

How to hide bottom navigation bar on a specific screen in react native?

javascript

reactjs

react-native

react-native-navigation