在react navigation v5.x中隐藏内部屏幕的底部导航

Question

我正在升级react native，并且正在进行一个项目。所以，我想把底部导航隐藏在像这样的内部屏幕上

- Dashboard
--- home <- hide bottom navigation
--- moment <- hide bottom navigation
--- period <- hide bottom navigation
--- contact <- hide bottom navigation
- Calendar
- Notification
- User

我曾尝试在Dashboard屏幕选项上使用tabBarVisible: false，但它隐藏了Dashboard屏幕上的底部导航，而不是内部屏幕。请问在内部屏幕上隐藏底部导航的最佳方式是什么？

这是我的导航代码：

底部导航

const BottomNavigation = () => (
<Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
<Tab.Screen
name={ScreenName.dashboard}
options={{tabBarLabel: 'Dashboard'}}
component={HomeNavigation}
/>
<Tab.Screen
name={ScreenName.calendar}
options={{
tabBarLabel: 'Calendar',
}}
component={Calendar}
/>
<Tab.Screen
name={ScreenName.notification}
options={{
tabBarLabel: 'Notification',
}}
component={Notification}
/>
<Tab.Screen
name={ScreenName.user}
options={{
tabBarLabel: 'User',
}}
component={User}
/>
</Tab.Navigator>
);

主页导航

const HomeNavigation = () => (
<Stack.Navigator
screenOptions={{
title: null,
headerStyle: {elevation: 0, shadowOpacity: 0},
}}>
<Stack.Screen
name={ScreenName.home}
component={Home}
options={() => ({
headerShown: false,
})}
/>
<Stack.Screen name={ScreenName.moment} component={Moment} />
<Stack.Screen name={ScreenName.period} component={Period} />
<Stack.Screen name={ScreenName.contact} component={Contact} />
</Stack.Navigator>
);

Answer 1

您应该将底部选项卡导航器放在堆栈导航器的第一个屏幕中，而不是相反：

- Home
--- Dashboard
--- Calendar
--- Notification
--- User
- Moment
- Period
- Contact

这样，当你推送一个新屏幕时，它将位于底部选项卡栏的上方，并且选项卡栏将不可见。

https://reactnavigation.org/docs/en/nesting-navigators.html#parent-navigators ui呈现在子导航之上

Answer 2

在要隐藏栏的屏幕上，设置tabBarVisible:false。

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