我正在升级 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>
);