【问题标题】:How to hide tabBar in nested screen in video fullscreen mode?如何在视频全屏模式下隐藏嵌套屏幕中的 tabBar?
【发布时间】:2019-01-21 06:30:00
【问题描述】:

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

【问题讨论】:

    标签: android react-native react-navigation


    【解决方案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},
    });
    

    【讨论】:

      猜你喜欢
      • 2018-06-26
      • 1970-01-01
      • 2010-11-02
      • 1970-01-01
      • 1970-01-01
      • 2015-06-27
      • 1970-01-01
      • 1970-01-01
      • 2013-08-18
      相关资源
      最近更新 更多