Question

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

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

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

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

我还试图删除SafeAreaView并改用常规View，但是它仍然不会消失。

仅出于测试目的，我删除了所有内容并添加了一个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 没有这种差距。

有关详细说明，请参阅我的 other answer。

Answer 2

检查状态栏组件，您可以在其中使用名为translucent的属性在状态栏下绘制应用程序。 Reference link

Answer 3

您只需隐藏您的 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的{{1}}属性设置为true，并将其背景设置为transluent，如下所示：

transparent

Answer 4

您尝试过使用这种方式

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

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

4 个答案: