Faster, Higher, Stronger
更快,更高,更强

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

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

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

支付宝扫一扫打赏

微信扫一扫打赏