如何修复弯曲 Android 手机顶部的空白空间

Question

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

这看起来不正常。 你知道如何解决吗？

我正在使用SafeAreaView<\/code>但没有任何 Android 特定的填充\/边距。

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

Answer 1

您无法删除它，这是 Pixel 4 模拟器上的一个显示错误。 物理 Pixel 4 没有这种差距。

有关详细说明，请参阅我的其他答案。

Answer 2

你有没有试过用这种方式

<StatusBar translucent={true} hidden={true} /> {/* <--- Here */}

Answer 3

检查状态栏组件，您可以使用名为translucent的属性在状态栏下方绘制应用程序。 参考链接

Answer 4

您可以通过像这样隐藏您的StatusBar来实现这一点：

import React from "react";
import { StatusBar, View, Text } from "react-native";

export default class Main extends React.Component {

    constructor(props) {
        super(props);
    }

    componentDidMount() {
        StatusBar.setHidden(true);
    }

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

更新：将StatusBar的transluent属性设置为 true 并使其背景transparent如下所示：

import React, { Component } from "react";
import { StatusBar, View, Text } from "react-native";

export default class Main extends Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    StatusBar.setTranslucent(true);
    StatusBar.setBackgroundColor("transparent");
  }

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

Answer 5

我设法通过转到 AVD 管理器来解决此问题 -> 单击擦除数据

图像<\/a>