Expo（React Native）：状态栏未在 android 上显示并添加了填充顶部

Question

运行应用程序时世博会去，它在 Android 上运行良好，但是当我使用预发布版本对其进行测试时，它删除了时钟并添加了填充。

这是我在 expo go 上跑步时看到的，也是我想要的

1. 注意它显示带有时钟和通知的状态栏
2. 注意状态栏和图像之间没有空格

   这是我安装预发布版本后得到的

   1. 注意它不显示状态栏
   2. 注意不应该存在的填充顶部

      主布局

      import React from 'react';
      import {StyleSheet, SafeAreaView, View} from 'react-native';
      import Constants from "expo-constants";
      
      export default function MainLayout({children}) {
          return (
              <SafeAreaView style={[styles.screen]}>
                  <View
                      style={[styles.view]}
                  >
                      {children}
                  </View>
              </SafeAreaView>
          );
      }
      
      const styles = StyleSheet.create({
          screen: {
              paddingTop: Constants.statusBarHeight,
              flex: 1,
          },
          view: {
              flex: 1,
          }
      });
      

      我认为填充顶部是由这条线paddingTop: Constants.statusBarHeight引起的，但我认为一旦 StatusBar 得到修复，它就不再是问题了。

      注意 1：它在 iOS 上按预期工作。

      注2：我确实看到了这个组件：https://docs.expo.dev/versions/latest/sdk/status-bar/ 但根据我的理解，默认的世博会配置应该是我所期望的（？）我还是试过了，但没有运气。我愿意给第二次机会。

Answer 1

我终于成功了。

首先我试着把这个添加到我的app.config.js

"androidStatusBar": {
    "backgroundColor": "#ffffff",
    "barStyle": "dark-content",
    "translucent": true,
    "hidden": false
},

它确实以某种方式起作用，但是该栏变灰了。编译时我收到一条消息，androidStatusBar.backgroundColor 与 splash.backgroundColor 冲突

我的假设是启动画面在启动应用程序时会更改状态栏样式。所以我需要做的就是在应用程序启动后更新状态栏。

但现在我知道了配置，我通过删除上面的配置并重新添加 expo-status-bar 来重新尝试，但这次使用的配置与我在 androidStatusBar 中的配置相同。

import React from 'react';
import {StyleSheet, SafeAreaView, View} from 'react-native';
import Constants from "expo-constants";
import {StatusBar} from "expo-status-bar";

export default function MainLayout({children}) {
    return (
        <SafeAreaView style={[styles.screen]}>
            <View
                style={[styles.view]}
            >
                {children}
            </View>
            <StatusBar style="dark"
                       translucent={true}
                       hidden={false}
            />
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    screen: {
        paddingTop: Constants.statusBarHeight,
        flex: 1,
    },
    view: {
        flex: 1,
    }
});

• style：必须是dark，因为“暗”是针对内容，而不是栏。
• translucent：必须是true。文档说它默认为 true，但我想初始屏幕将其更改为 false。
• hidden：不确定是否需要，但就这一点而言，我更愿意指定它。

最后一点：应用程序被下推的原因在translucent文档中指定

（布尔值）- 在 styles.xml 中设置 android:windowTranslucentStatus。为 false 时，系统状态栏会将您应用的内容向下推送（类似于位置：相对）。当为 true 时，状态栏浮动在应用内容之上（类似于位置：绝对）。默认为 true 以匹配 iOS 状态栏行为（只能浮动在内容上方）。