React native：(StatusBar)修改状态栏背景及文本颜色

 

在自定义导航栏得时候，状态栏得背景颜色和状态栏得颜色是不统一得，看起来很不协调，RN中文网找到了StatusBar，可以设置状态栏。https://reactnative.cn/docs/statusbar.html#docsNav

首先我定义了一些属性得约束，状态栏只用到了：statusBar: PropTypes.shape(StatusBarShape)

static propTypes={
        title:PropTypes.string,
        titleView:PropTypes.element,//要求属性是某个 React 元素
        hide:PropTypes.bool,
        translucent:PropTypes.bool,
        leftButton:PropTypes.element,
        rightButton:PropTypes.element,
        statusBar: PropTypes.shape(StatusBarShape),//形状的约束
    }

下面定义具体的约束，放在StatusBarShape里面：

const StatusBarShape={ //设置状态栏
    backgroundColor:PropTypes.string, //设置状态栏的背景色
    barStyle:PropTypes.oneOf(['default', 'light-content', 'dark-content']), //状态栏样式 default	默认的样式（IOS为白底黑字、Android为黑底白字）light-content	黑底白字 dark-content	白底黑字（需要Android API>=23）
    hidden:PropTypes.bool,   //状态栏是否隐藏
    translucent:PropTypes.bool,//指定状态栏是否透明
}

接下来设置一些如果调用的时候没设置的默认值：

static defaultProps={  //statusBar设置一些没有设置时候的默认值
        statusBar:{
            hidden:false,
            barStyle: 'light-content'
        }
    }

render显示：

在需要的地方调用：这里在自定义的导航栏中加入状态栏的设置也就是statusBar那一部分，statusBar就是上面定义好的，这边设置参数传递过去。

 <CustomNavigationBar
         title='顾客'
         statusBar={{ //设置状态栏参数
           backgroundColor:'red',
           hidden:false,
           translucent:true,
         }}
 />