SafeAreaView 顶部未在本机反应中显示背景颜色

Question

我有一个本机应用程序，我想用品牌颜色（在这种情况下为蓝色）显示设备的顶部，但它显示透明/灰色，只有主体显示蓝色，我怎么能这样它还显示顶部蓝色而不是灰色？

https://i.imgur.com/Zokz2n9.png

在我的 App.js 中

return (
    <SafeAreaView style={{ flex: 1, backgroundColor: 'rgb(3,91,150)', paddingTop: Platform.OS === 'android' ? 0 : 0 }}>
        <NavigationContainer>
            <ROOTSTACK1></ROOTSTACK1>
        </NavigationContainer>
    </SafeAreaView>
    );

我怎样才能使图像的顶部为彩色而不是灰色。

Answer 1

您所说的区域不在安全区域内。它是状态栏。请试试这个。

return (
  <SafeAreaView style={{ flex: 1, backgroundColor: 'rgb(3,91,150)' }}>
    <StatusBar barStyle="light-content" backgroundColor='rgb(3,91,150)' />
    <NavigationContainer>
      <ROOTSTACK1></ROOTSTACK1>
    </NavigationContainer>
  </SafeAreaView>
);

https://reactnavigation.org/docs/status-bar