如何在本机反应中隐藏特定屏幕上的底部导航栏？

Question

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

我尝试按照此处的代码（ 如何在特定屏幕上隐藏底部标签栏（react-navigation 3.x） ）； 但是，这最终没有成功，我无法以这种方式隐藏任何屏幕上的底部选项卡。

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

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

我以前所未有的方式遍历互联网以找到解决此问题的方法，因为文档提供的解决方案根本不起作用。

我有以下导航设置：

• 底部标签
  • 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 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} />
          ),
        };
      }}
    />

看我的回答： https ://stackoverflow.com/a/64042879/5288560

Answer 4

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

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

Answer 5

由于现在正在使用 react-navigation 5，因此上述解决方案不再适用。

对于 React-Navigation 5，请参阅此链接。

Answer 6

只需在要隐藏栏的屏幕上，设置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 7

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

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

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

当用户转到 MemberNavigator Stack 中的 MemberDetails 页面时，此函数将返回 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} />
})} />

这是官方文档以了解更多信息，请单击此处。

Answer 8

单击此处参考文档

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>

Answer 11

在第 6 版中，这对我有用：

要从屏幕中隐藏底部选项卡导航器：

navigation.getParent()?.setOptions({tabBarStyle: {display: 'none'}});

要从屏幕显示底部选项卡导航器：

navigation.getParent()?.setOptions({tabBarStyle: {display: 'flex'}});