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

Question

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

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

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

我还在 navigationOption 中使用了 paddingTop。

虽然没有提到背景颜色：

状态栏中提到红色背景色：

状态栏的透明背景色：

版本使用： 反应原生：0.61.5

Answer 1

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

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