React Native Expo 如何隐藏状态和栏使组件占据那个位置

Question

我无法用组件填充状态栏区域。我试图通过使用 <StatusBar hidden /> 隐藏状态栏来做到这一点。但是这个留下了一个白色的 space 。例如，我想在状态栏中填充绿色图像。

Answer 1

TLDR：工作项目link

要点 link（您在评论中提供），我可以看到您使用的是以下结构

<SafeAreaView>
      <StatusBar ... />
      <ImageBackground ...></ImageBackground>
 </SafeAreaView>

如果您想隐藏状态栏并用图像覆盖整个屏幕，您需要将 SafeAreaView 更改为 View 并删除 StatusBar 组件。

<View>
      <ImageBackground ...></ImageBackground>
</View>

因为 SafeAreaView 会动态地在顶部放置一些填充。因此，尽管您放置了 style={{ height: '100%', width: '100%' }}，但它会尊重 SafeAreaView 的填充，因为它是此处的父组件。

同样在这一点上，您不需要 StatusBar，因为 StatusBas 已经有一个图像作为背景。

React Native Expo How to Hide Status and bar make component take that place