react-native安卓简单沉迷式状态栏实现

此篇教程会持续升级。。。

此教程是来至于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组件。