ReactNative学习---设置状态栏

ReactNative默认状态下在顶部会显示时间、网络、电量等信息的状态栏


![在这里插入图片描述](https://img-blog.csdnimg.cn/20200108164818884.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d3ajI1Ng==,size_16,color_FFFFFF,t_70)
默认显示顶部状态栏
=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d3ajI1Ng==,size_16,color_FFFFFF,t_70)

你会发现状态栏和你的顶部文字会重叠在一起,很丑。下面有几个方法来解决

![在这里插入图片描述](https://img-blog.csdnimg.cn/20200108165024690.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d3ajI1Ng==,size_16,color_FFFFFF,t_70) 设置 marginTop:20

在这里插入图片描述设置paddingTop:20

上面就是显示效果,有个顶部距离就不会重叠在一起。

方法二 给第一个元素设置paddingTop:20
在这里插入图片描述
设置paddingTop:20

在这里插入图片描述
设置paddingTop:20

如上图所示,状态栏和第一条内容的背景色一致,融在一起了。
方法三 设置StatusBar
如果在页面加一行代码,状态栏就会隐藏

在这里插入图片描述

在这里插入图片描述

隐藏顶部

此外,StatusBar还可以设置更多的属性,详情请看api文档

顶部栏文字为白色
顶部栏文字为黑色

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值