我在我的应用程序中使用了反应导航,我想在视频全屏模式中在嵌套堆栈屏幕上隐藏tabBar。 我在嵌套屏幕的navigationOptions中测试了tabBarVisible,但是没有用。请帮我怎么做。谢谢
PlayerScreen.js :
class PlayerScreen extends Component {
static navigationOptions = ({navigation}) => ({
tabBarVisible: false, // not work correctly . in this snippet code i don't set condition to hide tabBar in fullscreen mode
header: navigation.state.params ? navigation.state.params.header : undefined,
headerLeft: <MaterialIcons style={{marginLeft: 20}} name={'arrow-back'} size={20}
onPress={ () => {
navigation.goBack();
}} />,
headerTintColor: colors.teal,
headerStyle: whiteHeaderStyle,
headerTitleStyle: {
alignSelf: 'center',
fontWeight: '400',
fontFamily: 'IRANSansMobile_Bold',
fontSize: 14,
textAlign: "center",
flex: 1,
},
});
...
}
。
TabNavigator.js :
const TabNavigator = createBottomTabNavigator({
Home: {screen: playerNavigation}
}, {
defaultNavigationOptions: ({navigation}) => ({
// tabBarVisible: true, // when use here it is work correctly but hide tabBar in all tabs
...
}),
...
});
const playerNavigation = createStackNavigator({
Home: {screen: Home},
Player: {screen: PlayerScreen},
});
答案 0 :(得分:0)
像这样将StackNavigator放在TabNavigator顶部:
const TabNavigator = createBottomTabNavigator({
Home: {screen: Home} // just the home screen, but you can also have another StackNavigator here with tabs below
}, {
...
});
// this StackNavigator is tabs-free
const playerNavigation = createStackNavigator({
Tabs: {screen: TabNavigator},
Player: {screen: PlayerScreen},
});