我正在升级 React Native,我正在做一个项目。所以,我想在内部屏幕上隐藏底部导航,例如
- Dashboard
--- home <- hide bottom navigation
--- moment <- hide bottom navigation
--- period <- hide bottom navigation
--- contact <- hide bottom navigation
- Calendar
- Notification
- User
我尝试在仪表板屏幕选项上使用 tabBarVisible: false
,但它隐藏了仪表板屏幕而不是内部屏幕上的底部导航。请问在内部屏幕上隐藏底部导航的最佳方法是什么?
这是我的导航代码:
底部导航
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>
);
最佳答案
您应该将底部选项卡导航器放在堆栈导航器的第一个屏幕中,而不是相反:
- Home
--- Dashboard
--- Calendar
--- Notification
--- User
- Moment
- Period
- Contact
这样,当您推送一个新屏幕时,它将位于底部标签栏上方,标签栏将不可见。
关于reactjs - 在 react 导航 v5.x 中隐藏内部屏幕的底部导航,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60320330/