Question

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

Answer 1

像这样将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},
});

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

1 个答案: