Question

如何在不编辑Android特定文件的情况下更改react-native组件的StatusBar组件的背景颜色？

文档says，我可以使用backgroundColor属性。但它失败了。 barStyle财产，setBarStyle＆amp;＆amp; setBackgroundColor静态方法也不能正常工作。

只有hidden属性有效。

我正在使用create-react-native-app构建的Expo。

Answer 1

在Expo App中，您需要在项目根目录中编辑app.json，如下所示：

{
    "expo": {
        "sdkVersion": "16.0.0",
        "androidStatusBar": {
            "barStyle": "dark-content",
            "backgroundColor": "#0A48A5"
        }
    }
}

查看Expo文档： https://docs.expo.io/versions/v16.0.0/guides/configuration.html

Answer 2

import { StatusBar } from 'react-native';

.
.
.

render() {

    StatusBar.setBackgroundColor('#A52D53', true);

    return (

      ............

    );
  }

Answer 3

您可以使用

<StatusBar
 backgroundColor="blue"
 barStyle="light-content"
/>

您可以查看文档here。

Answer 4

使用此

import {StatusBar} from 'react-native';


const bar = ()=>{
  return( <StatusBar
          backgroundColor="insert your color here"/>
 );
};

React Native中的StatusBar颜色

4 个答案: