此教程是来至于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);
指定状态栏的变化能否应以动画形式呈现。目前支持这几种样式:backgroundColor, barStyle和hidden。
这个我设置过,没发现有什么变化;
设置状态栏文本的颜色。
其中:light-content是白字黑底;dark-content是黑字白底(安卓与IOS均可),只不过IOS因为状态栏区域也可以直接填充,所以这个的体现为白字或者者黑字;
能否隐藏状态栏。
安卓和IOS均有效;
状态栏的背景色。
这个仅安卓平台有效,实现沉迷式状态栏大部分要使用这个属性,但使用这个实现的沉迷式不彻底,只满足纯颜色,一旦有渐变色,这个就不好用了,当然最好的纯颜色,由于状态栏的显示文本的颜色只有两种(白色和黑色);
指定状态栏能否透明。设置为true时,应用会延伸到状态栏之下绘制(即所谓“沉迷式”——被状态栏遮住一部分)。常和带有半透明背景色的状态栏搭配使用。
这个属性仅安卓有效,设置这个属性为true以后,在安卓手机上内容即可以从状态栏开始开始绘制了,而不是像以前那样从状态栏以下进行绘制,因为这个是从状态栏开始绘制,所以不需要单独设置状态栏的颜色;
原型:static setHidden(hidden: boolean, [animation]: StatusBarAnimation)
显示/隐藏状态栏
hidden(boolean)? 必填? 能否隐藏状态栏
animation(StatusBarAnimation)? 非必填? 改变状态栏显示状态的动画过渡效果
原型:static setBarStyle(style: StatusBarStyle, [animated]: boolean)
设置状态栏的样式
style(StatusBarStyle)? 必填? 要设置的状态栏样式
animated(boolean)? 非必填? 能否启用过渡动画
原型:static setBackgroundColor(color: string, [animated]: boolean)
设置状态栏的背景色
color(string)? 必填? 背景色
animated(boolean)? 非必填? 能否启用过渡动画
原型:static setTranslucent(translucent: boolean)
指定状态栏能否透明。设置为true时,应用会在状态栏之下绘制(即所谓“沉迷式”——被状态栏遮住一部分)。常和带有半透明背景色的状态栏搭配使用。
translucent(boolean)? 必填? 能否透明
以上就是准备工作
通过上面的属性或者者方法我们可以知道,只要要在StatusBar组件中设置translucent属性为true就可,同样也可以通过方法,也就是在渲染之前调用setTranslucent()方法;这样即可以像苹果一样从状态栏开始绘制,而不是状态栏以下。
看代码:
? ? 第一种:
? ? <StatusBar barStyle={'dark-content'} translucent={true} />
? ? 这个是第一个View的第一个孩子组件;
? ? 第二种:
? ? constructor(props){
? ? ? ? super(props);
? ? ? ? StatusBar. setTranslucent(true);
? ? ? ? StatusBar.setBarStyle('light-content');
? ? }
记得在使用前导入StatusBar组件。