如何在视频全屏模式下的嵌套屏幕中隐藏tabBar?

时间:2019-01-21 06:30:00

标签: android react-native react-navigation

我在我的应用程序中使用了反应导航,我想在视频全屏模式中在嵌套堆栈屏幕上隐藏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},    
});

1 个答案:

答案 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},
});