此篇教程会持续更新。。。
此教程是来至于StatusBar
测试：苹果虚拟机IOS11.1；安卓8.0的华为Mate9。
编写环境：在macbook Pro笔记本中；
使用的xcode版本是9.1；
使用的Android Studio3.2；
使用React Native项目版本是0.50.0；
使用的是VScode编写的代码；
准备工作（如果要跳过，直接滑到下面斜体的位置）
在苹果上，默认高度是整个手机的高度；然而安卓默认是除了状态栏以下的高度，我们通过Dimensions获取的高度也是不一样的，也就是说，在安卓手机上获取得到的高度也是除了状态栏以下的高度；官方提供一个常量，可以获取安卓手机上状态栏的高，在苹果手机上使用此方法获取得到的是undefined：
currentHeight(仅限Android)状态栏的当前高度（StatusBar.currentHeight）；
属性（Props）
animated(true|false)
指定状态栏的变化是否应以动画形式呈现。目前支持这几种样式：backgroundColor, barStyle和hidden。
这个我设置过，没发现有什么变化；
barStyle(enum('default', 'light-content', 'dark-content'))
设置状态栏文本的颜色。
其中：light-content是白字黑底；dark-content是黑字白底（安卓与IOS均可），只不过IOS由于状态栏区域也可以直接填充，所以这个的表现为白字或者黑字；
hidden(true|false)
是否隐藏状态栏。
安卓和IOS均有效；
backgroundColor(string)
状态栏的背景色。
这个仅安卓平台有效，实现沉浸式状态栏大部分要使用这个属性，但使用这个实现的沉浸式不彻底，只满足纯颜色，一旦有渐变色，这个就不好用了，当然最好的纯颜色，因为状态栏的显示文本的颜色只有两种（白色和黑色）；
translucent(true|false)
指定状态栏是否透明。设置为true时，应用会延伸到状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分）。常和带有半透明背景色的状态栏搭配使用。
这个属性仅安卓有效，设置这个属性为true以后，在安卓手机上内容就可以从状态栏开始开始绘制了，而不是像以前那样从状态栏以下进行绘制，由于这个是从状态栏开始绘制，所以不需要单独设置状态栏的颜色；
方法
setHidden()
原型：static setHidden(hidden: boolean, [animation]: StatusBarAnimation)
显示／隐藏状态栏
hidden(boolean) 必填 是否隐藏状态栏
animation(StatusBarAnimation) 非必填 改变状态栏显示状态的动画过渡效果
setBarStyle()
原型：static setBarStyle(style: StatusBarStyle, [animated]: boolean)
设置状态栏的样式
style(StatusBarStyle) 必填 要设置的状态栏样式
animated(boolean) 非必填 是否启用过渡动画
setBackgroundColor()
原型：static setBackgroundColor(color: string, [animated]: boolean)
设置状态栏的背景色
color(string) 必填 背景色
animated(boolean) 非必填 是否启用过渡动画
IOS不支持此方法
setTranslucent()
原型：static setTranslucent(translucent: boolean)
指定状态栏是否透明。设置为true时，应用会在状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分）。常和带有半透明背景色的状态栏搭配使用。
translucent(boolean) 必填 是否透明
IOS不支持此方法
以上就是准备工作
通过上面的属性或者方法我们可以知道，只需要在StatusBar组件中设置translucent属性为true即可，同样也可以通过方法，也就是在渲染之前调用setTranslucent()方法；这样就可以像苹果一样从状态栏开始绘制，而不是状态栏以下。
看代码：
第一种：
<StatusBar barStyle={'dark-content'} translucent={true} />
这个是第一个View的第一个孩子组件；
第二种：
constructor(props){
super(props);
StatusBar. setTranslucent(true)；
StatusBar.setBarStyle('light-content');
}
记得在使用前导入StatusBar组件。
网友评论