我正在使用 React Native 和 React Native Navigation 来构建我的应用程序。目前，我有三个底部选项卡：主页、上传视频和消息。选择“上传视频”选项卡后，我想渲染“上传视频”组件并隐藏该屏幕上的底部选项卡，并显示带有“取消”的标题（将它们带回 HomeView）和“发布”按钮（这有已经完成了）。我在这个特定屏幕上隐藏标签栏非常困难。
我尝试按照此处的代码进行操作（如何隐藏特定屏幕上的底部选项卡栏（react-navigation 3.x））；然而，这最终没有成功，我无法以这种方式隐藏任何屏幕上的底部选项卡。
目前，我将此作为我的底部导航器：
const BottomTabNavigator = createBottomTabNavigator({
HomeView: {
screen: HomeView,
},
VideoView: {
screen: VideoSelectionView
},
Messages: {
screen: SearchView
}
});
任何见解都会非常有帮助，谢谢。
我以前所未有的方式在互联网上寻找这个问题的解决方案，因为文档提供的解决方案根本不起作用。
我有以下导航设置：
我想隐藏屏幕 1 中的底部栏。最终实现的技巧是相应屏幕中的以下代码片段：
useEffect(() => {
navigation.getParent()?.setOptions({
tabBarStyle: {
display: "none"
}
});
return () => navigation.getParent()?.setOptions({
tabBarStyle: undefined
});
}, [navigation]);
该效果在导航道具更新时运行，并在屏幕打开后隐式运行。使用
getParent()setOptions(...)useEffect()愿这能让你们免于我所经历的绝望。
您需要为每个需要隐藏选项卡栏的TabBar屏幕或堆栈指定，
const BottomTabNavigator = createBottomTabNavigator({
HomeView: {
screen: HomeView,
navigationOptions:()=>{
return {
tabBarVisible:false,
};
}
},
VideoView: {
screen: VideoSelectionView
},
Messages: {
screen: SearchView
}
});
仅将 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]);
}
在 React Navigation V6 中，在 tabBarStyle 下的选项中添加
display: nonetabBarButton: () => null,<Stack.Screen
name="Add Product"
component={AddProduct}
options={() => ({
tabBarStyle: {
display: "none",
},
tabBarButton: () => null,
})}
/>
在 v5 上，您可以使用函数和默认参数导航来修改选项。:
<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} />
),
};
}}
/>
在版本 6 中，这对我有用：
要隐藏屏幕底部选项卡导航器：
navigation.getParent()?.setOptions({tabBarStyle: {display: 'none'}});
要从屏幕显示底部选项卡导航器：
navigation.getParent()?.setOptions({tabBarStyle: {display: 'flex'}});
由于现在使用的是react-navigation 5，上述解决方案不再起作用。
对于 React-Navigation 5，请参阅此链接。
在 React 导航 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} />
})} />
这里是官方文档了解更多点击这里。
经过搜索并尝试了很多方法后，我将顶部元素 View 更改为 Modal，然后隐藏底部栏，因为模态可以是上底部栏。这不是最好的，但仍然有用。
<View>
//code block
</View>
to->
<Modal animationType='fade' transparent={false} visible={true}>
/code block
</Modal>
在版本 6+ 中这解决了我的问题
<Tab.Screen
name="Profile"
component={Profile}
options={{ tabBarButton: (props) => null }}
/>
在要隐藏标签栏的屏幕上添加以下代码。这适用于 v7。
useEffect(() => {
navigation.getParent() ? .setOptions({
tabBarStyle: {
display: 'none'
}
});
return () => {
navigation.getParent() ? .setOptions({
tabBarStyle: {
display: 'flex'
}
});
}
}, [])在您想要隐藏栏的屏幕上，设置 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
}}
/>