Recat native:(StatusBar)修改狀態列背景及文字顏色
阿新 • • 發佈:2018-12-21
首先我定義了一些屬性得約束,狀態列只用到了: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, }} />