如何修复React Native中的状态栏区域？我正在使用 expo，刚刚从 SDK 48 升级到 49

Question

我刚刚回来完成一个不久前使用

React-Native

开始的

Expo (SDK 48)

项目。当我升级到

SDK 49

后，状态栏区域和视图底部变成了纯白色。在升级之前，它们匹配了背景颜色（就像我想要的那样）。链接的图像显示了我所指的区域。

我有

windows

，正在使用

WSL

和

VS Code

，并且一直在使用

Expo Go

在我的 iPhone 上测试该应用程序。当前的 Expo Go 应用程序不再支持 SDK 48，因此我升级到 SDK 49（这样我仍然可以使用 expopublish，直到他们取消它）。

我花了很多时间查看React Native文档，但我不知道它有什么问题。我是否有代码问题或者这看起来更像是 Expo go 问题？

在 SDK 升级之前，状态栏区域不是问题。我尝试了状态栏下的

backgroundColor

属性，但这仅适用于 Android。我已将

translucent

属性更改为 true，但没有效果。

我希望纯白色区域与蓝色背景颜色相匹配。

谢谢。

第一页代码

import { StyleSheet, Text, View, SafeAreaView, StatusBar, Platform } from "react-native";
import { Link } from "expo-router";

export default function Page() {
  return (
    <SafeAreaView style={styles.container}>
      <View
    style={{
      height: Platform.OS === 'ios' ? 20 : StatusBar.currentHeight,
    }}>
    <StatusBar
      barStyle="light-content"
      hidden={false}
          translucent={false}
    />
       </View>
      <View style={styles.main}>
        <Text style={styles.title}>Transit Sim</Text>
        <Text style={styles.subtitle}>Simulate your ticket</Text>
        
        <View style={styles.linkView}>
          <Link href="/home" style={styles.link}>Start</Link>
        </View>        
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    backgroundColor: "#244A9F",
  },
  main: {
    flex: 1,
    justifyContent: "center",
    maxWidth: 960,
    marginHorizontal: "auto",
  },
  title: {
    fontSize: 64,
    fontWeight: "bold",
    color: "white",
  },
  subtitle: {
    fontSize: 36,
    color: "#38434D",
    color: "white",
  },
  linkView: {
    height: "auto",
    width: 80,
    marginTop: 15,
    borderWidth: 2,
    borderRadius: 10,
    borderColor: "black",
    paddingTop: 2,
    paddingLeft: 5,
    paddingRight: 5,
    paddingBottom: 2,
    backgroundColor: "#fff",
    flex: 0,
    alignItems: "center",
  },
  link: {
    fontSize: 25,
  }
});

** 编辑

这里是上述代码的小吃链接。小吃中的 ios 模拟器的状态栏显示如我所期望的那样。看来这是我的博览会或配置问题？ https://snack.expo.dev/@derek4987/first-page?platform=ios

Answer 1

尝试在

<View>

周围添加环绕

<SafeAreaView>

，并为其指定背景颜色？