如何修复曲面 Android 手机顶部的空白区域

Question

我在大多数 android 设备（和 iOS）上测试的我的 react-naive 应用程序在模拟器上看起来都很好，但是一些顶部有明显弯曲屏幕的设备（Google Pixel 4，API 29），它在手机顶部显示一个很大的空白区域.

这看起来不正常。你知道如何修复它吗？

我正在使用SafeAreaView但没有任何 android 特定的填充/边距。

<SafeAreaView style={{flex:1}}>
    ... My App Code come here.
</SafeAreaView>

我还尝试删除 SafeAreaView 并使用常规视图代替，但它仍然不会消失。

只是为了测试，我删除了所有内容并添加了一个 hello world 测试屏幕。它仍然提供相同的宽空间。现在这是我的整个应用程序：

export default class Main extends React.Component {
    constructor(props) {
      super (props);
    }

  render () {
    return (
        <View style={{flex:1, backgroundColor: 'white'}}>
            <Text> Hello World, How to fix this ? </Text>
        </View>
    );
  }
}

AppRegistry.registerComponent(appName, () => Main);

Answer 1

您无法删除它，这是 Pixel 4 模拟器上的显示错误。实体 Pixel 4 不存在这样的差距。

详细解释请参阅我的另一个答案。