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

  • 时间:2020-04-24 20:58 作者:吴敬悦 来源: 阅读:710
  • 扫一扫,手机访问
摘要:此篇教程会持续升级。。。此教程是来至于StatusBar测试:苹果虚拟机IOS11.1;安卓8.0的华为Mate9。编写环境:在macbook Pro笔记本中;? ? ? ? ? ? ? ? ? ? ? 使用的xcode版本是9.1;? ? ? ? ? ? ? ? ? ? ? 使用的Android

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

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

  • 全部评论(0)
上一篇:排序算法小结
下一篇:排序算法小结
最新发布的资讯信息
【系统环境|】2FA验证器 验证码如何登录(2024-04-01 20:18)
【系统环境|】怎么做才能建设好外贸网站?(2023-12-20 10:05)
【系统环境|数据库】 潮玩宇宙游戏道具收集方法(2023-12-12 16:13)
【系统环境|】遥遥领先!青否数字人直播系统5.0发布,支持真人接管实时驱动!(2023-10-12 17:31)
【系统环境|服务器应用】克隆自己的数字人形象需要几步?(2023-09-20 17:13)
【系统环境|】Tiktok登录教程(2023-02-13 14:17)
【系统环境|】ZORRO佐罗软件安装教程及一键新机使用方法详细简介(2023-02-10 21:56)
【系统环境|】阿里云 centos 云盘扩容命令(2023-01-10 16:35)
【系统环境|】补单系统搭建补单源码搭建(2022-05-18 11:35)
【系统环境|服务器应用】高端显卡再度登上热搜,竟然是因为“断崖式”的降价(2022-04-12 19:47)
手机二维码手机访问领取大礼包
返回顶部