StatusBar组件是对状态栏进行设置的组件,设置自定义状态栏,可以提高应用美观,让用户在沉浸式的应用中体验。
主要属性有:
-
backgroundColor
状态栏颜色,仅android -
barStyle
状态栏文本颜色,Android仅支持6.0及以上版本,enum('default', 'light-content', 'dark-content')
-
translucent
指定状态栏是否透明。设置为 true 时,应用会延伸到状态栏之下绘制(即所谓“沉浸式”——被状态栏遮住一部分)。常和带有半透明背景色的状态栏搭配使用,仅android -
animated
指定状态栏的变化是否应以动画形式呈现。目前支持这几种样式:backgroundColor, barStyle 和 hidden -
hidden
是否隐藏状态栏 -
networkActivityIndicatorVisible
指定是否显示网络活动提示符,仅ios -
showHideTransition
通过hidden
属性来显示或隐藏状态栏时所使用的动画效果。默认值为'fade',还有'slide'值,仅ios
本文重点描述translucent
产生的问题进行概括。
由于设置translucent=true
时,应用页面会延伸到状态栏之下绘制,也就是说,如果是一张图片,那么在状态栏之下显示图片,而默认的都是状态栏下进行绘制.
在应用中发生了画面跳动的现象,如下视频:
发生画面跳动的视频
可以看出,每次从Discover
页面跳转到Profile
,或从Profile
页面跳转到Discover
页面时,总会出现页面向下或向上绘制。
经过测试,发现Discover
页面中StartBar
组件的没有设置traslucent
属性,而Profile
页面则设置了translucent={true}
和backgroundColor='transparent'
两个属性,所以导致了每次切换都要重新绘制状态栏的高度,导致了问题。
此问题仅仅出现在Android设备端,所以最终采取了,在Profile
页面设置:
<StatusBar
barStyle="light-content"
backgroundColor="#000"
/>
去掉了translucent
属性。
因为Profile
页面的画顶部正好趋向黑色,所以在此直接设置了黑色,最终的结果是好的。
如下视频:修改之后的视频