在自定义导航栏得时候,状态栏得背景颜色和状态栏得颜色是不统一得,看起来很不协调,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显示:

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

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

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

 

12-19 07:03