如何在本机反应中使状态栏透明？

Posted 2023-04-18

【中文标题】如何在本机反应中使状态栏透明？

【英文标题】：How to make statusbar transparent in react native?

【发布时间】：2021-06-28 12:23:29

【问题描述】：

我的状态栏背景颜色在尝试使其透明时变为白色。

<SafeAreaView style= flex: 1 >
    <StatusBar
         animated=true
         backgroundColor="transparent"
         barStyle="dark-content"
         translucent=true
     />
     <View>
         ...
     </View>
   </SafeAreaView>

如果我使用状态栏背景颜色为红色或绿色，它会反映在状态栏中。但是当我使用状态栏背景颜色作为“透明”时，它显示了一些白色阴影。如果我删除背景颜色标签，它会显示一个灰色状态栏。

我也在 navigationOption 中使用 paddingTop。

虽然没有提到背景颜色：

而状态栏中提到的红色背景颜色：

状态栏的透明背景色：

版本使用： 反应原生：0.61.5

【问题讨论】：

它看起来像透明的，因为你的背景是白色的。你能把你的背景换成另一种颜色再试一次吗？ @PrantikMondal

感谢您的回复@SickRanchez。我已经通过删除完整视图进行了测试。只保留状态栏。尽管如此，它还是显示出一些灰色。

【参考方案1】：

如果您想实现状态栏，请在 App.js 中使用它。根据我的经验，问题出在 SafeAreaView 上。这是我的一个项目中的一个 sn-p。

export default function App()    return (
    <NavigationContainer>
      <StatusBar
        animated=true
        backgroundColor="transparent"
        barStyle='dark-content'
        translucent=true
      />
      <RootStackScreen />
    </NavigationContainer>   );