React Native 0.65应用屏幕顶部出现灰色块，请问其来源是什么？

问题原因 #

你看到的顶部灰色区域是安卓系统默认的状态栏，React Native 0.65版本安卓端默认给状态栏设置了浅灰色背景，react-native-safe-area-context提供的SafeAreaView只会自动给内容添加内边距避让系统栏，不会修改系统状态栏本身的样式，所以你给SafeAreaView设置的背景色不会覆盖到状态栏区域。

解决方案 #

你可以使用React Native自带的StatusBar组件自定义状态栏样式，以下是适配你更新后代码的修改示例：

import React from "react";
import {
  StyleSheet,
  View,
  StatusBar // 导入StatusBar组件
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

const App = () => {
  return (
    <>
      {/* 配置状态栏：背景设为透明、内容为深色，也可以根据需要调整背景色 */}
      <StatusBar translucent backgroundColor="transparent" barStyle="dark-content" />
      <SafeAreaView style={{ flex: 1, backgroundColor: "red" }}>
        <View style={{ flex: 1, backgroundColor: "blue" }} />
      </SafeAreaView>
    </>
  )
}

export default App;

如果不需要状态栏透明，直接给backgroundColor属性设置和你页面顶部一致的颜色即可，比如要和上方的红色区域对齐就设为"red"。

内容的提问来源于stack exchange，提问作者softshipper