React Native - 状态栏颜色 iOS 和 Android

Question

我无法在带有 Expo 的 React Native 上设置 iOS 和 Android 上状态栏的颜色。 我只是设法隐藏它。

代码：

import * as React from 'react';
import { WebView } from 'react-native-webview';
import { StatusBar } from 'react-native'

export default class App extends React.Component {
   render() {
      return <>
         <StatusBar hidden={true} />
         <WebView source={{ uri: 'https://foo.co' }} style={{ marginTop: 33 }} />
      </>
   }
}

我已经试过了：

<StatusBar hidden={false} barStyle="light-content" />

和：

<StatusBar barStyle = "dark-content" hidden = {true} backgroundColor = "#00BCD4" translucent = {true}/>

我真的很困惑这个 StatusBar 是如何工作的。

提前谢谢你！

Answer 1

backgroundColor 道具改变你的 StatusBar 颜色，你最后一个例子的问题是你使用 hidden={true}

import { StatusBar } from 'react-native';

<StatusBar backgroundColor="#00BCD4" />

对于expo，你应该配置app.json https://docs.expo.io/versions/latest/guides/configuring-statusbar/