立诚勿怠,格物致知
It's all about connecting the dots

StatusBar(状态条) in React Native

描述:

该组件用于控制应用的状态条。

与Navigator联用:

StatusBar组件是允许同时出现多个的(当然,状态条是只有一个的),多个StatusBar组件的属性会被合并到一起(越后装载的StatusBar组件的属性会越迟被合并)。比如,可以通过Navigator实现根据路由来调整状态条的样式。

<View>
   <StatusBar
     backgroundColor="blue"
     barStyle="light-content"
   />
   <Navigator
     initialRoute={{statusBarHidden: true}}
     renderScene={(route, navigator) =>
       <View>
         <StatusBar hidden={route.statusBarHidden} />
         ...
       </View>
     }
   />
 </View>
Imperative API:

For cases where using a component is not ideal, there is also an imperative API exposed as static functions on the component. It is however not recommended to use the static API and the component for the same prop because any value set by the static API will get overriden by the one set by the component in the next render.

常量:

currentHeight(仅适用于安卓):状态条的高度。

属性:

animated:布尔值

指定状态条属性变化导致的样式过渡是否需要以动画形式呈现出来。支持的属性有:backgroundColor、barStyle和hidden。

barStyle:字面量

设定状态条中文本的颜色。

hidden:布尔值

指定是否隐藏状态条。

backgroundColor(安卓):

指定状态条的背景色。

translucent(安卓):布尔值

指定状态条是否为半透明。当值为true时,状态条会被绘制于app之上。当你要使用本透明的状态条颜色时,这会很有用。

networkActivityIndicatorVisible(iOS):布尔值

指定是否要显示网络信号。

showHideTransition(iOS):字面量

指定通过改变hidden属性来显示、隐藏状态条时的过渡效果。默认值为’fade’。

方法:

static setHidden(hidden: boolean, animation?: StatusBarAnimation)

显示、隐藏状态条。

static setBarStyle(style: StatusBarStyle, animated?: boolean)

指定状态条样式。

static setNetworkActivityIndicatorVisible(visible: boolean)

控制网络信息指示器的可见性。

static setBackgroundColor(color: string, animated?: boolean)

设定状态条背景色。

static setTranslucent(translucent: boolean)

控制状态条是否为半透明。

枚举值定义:

StatusBarStyle:状态条样式

  • default:默认的状态条样式(iOS为深色,安卓为浅色);
  • light-content:深色背景,白色文本和图标;
  • dark-content:浅色背景,深色文本和图标。

StatusBarAnimation:状态条动画

  • none:无动画;
  • fade:fade动画;
  • slide:slide动画。
参考:
  • https://facebook.github.io/react-native/docs/statusbar.html
赞(0) 打赏
版权声明:非商业用途转载请注明文章链接,商业用途转载请联系邮箱获取授权。
文章名称:《StatusBar(状态条) in React Native》
文章链接:https://www.orzzone.com/statusbar-in-react-native.html
商业联系:yakima.public@gmail.com
本站内容仅供个人学习交流,不做为任何投资、建议的参考依据,因此产生的问题需自行承担。

评论 抢沙发

大前端WordPress主题 更专业 更方便

支持快讯、专题、百度收录推送、人机验证、多级分类筛选器,适用于垂直站点、科技博客、个人站,扁平化设计、简洁白色、超多功能配置、会员中心、直达链接、文章图片弹窗、自动缩略图等...

去看看

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力提供更多优质内容!

支付宝扫一扫打赏

微信扫一扫打赏

登录

找回密码

注册