javascript - SafeAreaView 顶部未在 react-native 中显示背景颜色

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>
    );

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

标签： javascriptreactjsreact-native

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