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

【问题标题】：React Native Expo How to Hide Status and bar make component take that placeReact Native Expo 如何隐藏状态和栏使组件占据那个位置
【发布时间】：2021-12-31 19:55:01
【问题描述】：

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

【问题讨论】：

您好，我无法重现此问题，能否提供带有示例代码的 GitHub 链接？
嗨，@MRPMOHIBURRAHMAN 实际上我让应用程序太复杂了。我将正确格式化它将粘贴 git 链接。截至目前，基本样板代码 - link 。即使在状态栏下，我也只想将背景填充到全屏。
找到了解决办法，给我一点时间。

标签： react-native react-navigation

【解决方案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已经有一个图像作为背景。

【讨论】：

@Rashmi Ranjan Bisoi，检查这个答案。如果它解决了您的问题，请不要忘记接受答案:)
嗨@MRPMOHIBURRAHMAN 它有帮助
@Rashmi Ranjan Bisoi，太棒了，继续破解！！！