使状态栏不透明（React Native）答案

【问题标题】：Make status bar not be translucent (React Native)使状态栏不透明（React Native）
【发布时间】：2017-10-09 18:44:41
【问题描述】：

我正在 React Native 中创建一个使用 react-navigation 的应用程序。

我有一些视图会在屏幕顶部产生动画效果。动画时，视图位于 react-navigation 导航标题的后面。它位于 iOS 状态栏的后面，但状态栏是半透明的，因此它会在视图顶部显示状态栏文本。状态栏不再是白色，而是其下视图的颜色。

这看起来不对，我希望状态栏始终位于顶部而不是半透明的。解决此问题的最佳方法是什么？

【问题讨论】：

标签： ios react-native

【解决方案1】：

我终于能够通过将这个元素放在我最顶层的容器中来避免内容与状态栏重叠：

<View 
    style = {{
        height: 20, 
        width: width, 
        backgroundColor: 'white', 
        zIndex: 3, 
        position: 'absolute', 
        top: 0,  
        left: 0,
    }} 
/>

状态栏仍会显示，但动画内容不会与其重叠。

【讨论】：

【解决方案2】：

这是因为你的 react-navigation 标头有一个海拔属性，它在 Android 中作为 zIndex 工作很奇怪（我认为只是在某些情况下），你可能可以通过向 iOS 状态栏添加比你更高的 zIndex 来解决这个问题在动画中。

编辑：已解决How to set iOS status bar background color

【讨论】：

感谢您的建议。我尝试像这样更改动画视图的 zIndex：但它仍然给我同样的问题。
抱歉，动画是显示在状态栏上方还是下方？
如果问题是显示在下面，你可以创建一个位置：相对视图作为绝对动画的父级，这样它就不会进入IOS半透明状态栏。
动画似乎在状态栏文本下方，但由于状态栏是半透明的，所以它显示了它下方的视图，而不是状态栏的白色。
我也尝试过，但没有成功：