React Native适配StatusBar | Zefey's Blog

React Native适配StatusBar

Last Modified : 2018-12-01 | react-native | react-native

在开发中经常需要改变StatusBar的颜色，甚至需要添加渐变、使用图片做背景，以达到沉浸式体验。

Android的StatusBar默认存在高度，可以设置 translucent 和 backgroundColor 使其与IOS的StatusBar保持一致。

<StatusBar 
    barStyle={'light-content'} 
    backgroundColor='rgba(0,0,0,0)' 
    translucent={true}/>

设置完StatusBar之后，还需要在 NavBar 设置一个paddingTop补白为状态栏高度。

注:Android可以通过StatusBar.currentHeight 获取状态栏高度，Iphone X以下状态栏高度为20，Iphone X及以上高度为44.