Reacct Native状态栏(动态)设置-StatusBar

（安卓）手机的状态栏默认为黑色背景如图：

但是有时候我们需要将它设置为白色或是其他颜色使得和整体样式更搭。

那么就需要用到 StatusBar

1.先引入StatusBar

import { StatusBar} from 'react-native';

2.页面使用

<StatusBar
    backgroundColor={'#ffffff'}//设置状态栏背景颜色
    barStyle={"dark-content"} //设置字体颜色为黑色
    networkActivityIndicatorVisible
/>

 在render中加入即可

 3.如果不加

barStyle={"dark-content"} //设置字体颜色为黑色

 会出现如图情况：

加上这句话就可以了

4.最终效果如图

5.还有一种情况，就是在有透明遮框的时候头部会有问题（白底黑字时），如图

尝试了很多情况都没有解决，遮框用的是 <Modal> , 无透明度是可以整屏遮住的。

最后尝试了修改修改 StatusBar 的背景色实现：

代码：

/*打开操作模态框*/
openModal(rowData, rowMap) {
    this.setState({
        showSetting: true
    }, function () {
        StatusBar.setBackgroundColor("rgba(0,0,0,0.50)");
    });
}

效果：

 

如果这样直接使用 StatusBar.setBackgroundColor，会有出现过度不协调问题，代码如：

/*打开操作模态框*/
openModal(rowData, rowMap) {
    this.setState({
        showSetting: true
    });
    StatusBar.setBackgroundColor("rgba(0,0,0,0.50)");
}

另外在关闭模态框的时候需要再次设置背景色，代码：

/*模态框取消操作*/
closeModal() {
    this.setState({
        showSetting: false,
        bottom: new Animated.Value(-(320 / zoomH))
    },function(){StatusBar.setBackgroundColor("#FFFFFF");});

};

不然会出现如下情况：

还有一些其他的属性，请参考rn中文网

https://reactnative.cn/docs/statusbar/