如何使用状态栏正确显示本机顶部选项卡和堆栈导航器？

Question

我正在尝试使用选项卡导航屏幕作为主屏幕和一个进入另一个屏幕的按钮的本机应用程序。我在使用状态栏使一切看起来正确时遇到问题。

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

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'}，...}