如何使React本机顶部标签和堆栈导航器正确显示在状态栏上？

Question

我正在尝试在react native中创建一个应用程序，该应用程序具有一个选项卡导航屏幕作为主屏幕，一个按钮转到另一个屏幕。我在使用状态栏使所有内容看起来正确时遇到问题。

我有这个作为我的导航器：

const tabConfiguration = {
    DecksList: {
        screen: DecksList,
        navigationOptions: {
            title: 'Deck List'
        }
    },
    NewDeck: {
        screen: NewDeck,
        navigationOptions: {
            title: 'New Deck'
        }
    },
};

const TabNavigator =
    Platform.select({
        ios: createBottomTabNavigator(tabConfiguration),
        android: createMaterialTopTabNavigator(tabConfiguration)
    });

const StackNavigator = createStackNavigator({
        Main: {
            screen: TabNavigator,
            navigationOptions: {
                header: null
            }
        },
        Deck: {
            screen: Deck,
            navigationOptions: {
                title: 'Deck'
            }
        }
    });

export default createAppContainer(StackNavigator);

我的App.js像这样：

export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
                <StatusBarView backgroundColor={'red'}
                               barStyle="light-content"/>
                <AppNavigator/>
            </View>
        );
    }
}

StatusBarView是：

const StatusBarView = props => {
    const {backgroundColor} = props;
    return (
        <View style={{backgroundColor, height: Constants.statusBarHeight}}>
            <StatusBar translucent backgroundColor={backgroundColor} {...props} />
        </View>
    );
};

使用这样的代码，我的标签屏幕如下： 我的另一个屏幕如下所示： 由于StatusBarView，第二个屏幕的标题比应有的要高。如果删除它，第二个屏幕看起来不错： 但是选项卡屏幕位于状态栏后面： 有人知道如何正确处理吗？我需要一个屏幕的状态栏（一个选项卡），而另一屏幕（一个没有选项卡的状态）无法显示。

我这里所作快餐：https://snack.expo.io/@esscheffer/flashcards-start

Answer 1

此行将解决问题

  

navigationOptions：{headerForceInset：{top：'never'}，...}