无法摆脱iPhone X模拟器顶部的白色部分

Question

我刚刚开始学习和构建带有React Native的应用程序。以前从未使用过xCode，而是在使用iPhone X模拟器。登录和注册屏幕本身可以正常显示。但是，一旦我使用react导航器，我就会在顶部显示白色部分，并且无法摆脱它。请帮忙。

我添加了SafeAreaView并尝试了各种设置，但这无济于事。

这是App.js

import React, { Component } from 'react';
import { StyleSheet } from 'react-native';
import { createAppContainer, createStackNavigator, SafeAreaView } from 'react-navigation';

import LoginScreen from './components/pages/LoginScreen.js'
import RegisterScreen from './components/pages/RegisterScreen.js'

export default class App extends Component<Props> {
  render() {
    return (
      <SafeAreaView style={styles.safeArea} forceInset={{ top: 'never' }}>
        <AppStackNavigator style={styles.container}/>
      </SafeAreaView>
    );
  }
}

const AppStackNavigator = createAppContainer(createStackNavigator ({
  Login: LoginScreen,
  Register: RegisterScreen
}))

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#212121',
    marginVertical: 40,
  },
  safeArea: {
    flex: 1,
    backgroundColor: '#212121',
  }
});

Answer 1

尝试一下：

    const AppStackNavigator = createAppContainer(
      createStackNavigator({
        Login: {
          screen: LoginScreen,
          navigationOptions: {
            header: null,
          },
        },
        Register: RegisterScreen,
      }),
);

-

import { getStatusBarHeight } from 'react-native-iphone-x-helper';

class LoginScreen extends React.Component {
  render() {
    <View style={{ flex: 1, backgroundColor: PRIMARY_COLOR }}>
      <SafeAreaView style={{ flex: 1, marginTop: -getStatusBarHeight() }}>
        {/* Content */}
      </SafeAreaView>
    </View>;
  }
}

Answer 2

尝试react-native-iphone-x-helper