React native:(StatusBar)修改狀態列背景及文字顏色
阿新 • • 發佈:2018-11-15
在自定義導航欄得時候,狀態列得背景顏色和狀態列得顏色是不統一得,看起來很不協調,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, }} />