React Native StatusBar的使用

1. 什么是状态栏，状态栏在iOS和Android上有哪些不同？

状态栏是指app最上边展示时间、信号等信息的一览，如下图被框住的地方所示：

支付宝的StatusBar示意图

• 在Android中，这一栏默认显示，app的内容会紧接着显示在状态栏的下方。
• 在iOS中，这一栏也是默认显示，但是app的内容会顶到屏幕最上方，状态栏会浮现在内容的上方。

2. StatusBar的属性

React Native提供了一个组件——StatusBar用于控制状态栏，包括颜色，动画效果，显示和隐藏等。
StatusBar在iOS和Android上可供设置的属性稍有不同。

2.1 通用属性

• animated
  设置当状态栏的状态发生变化时，是否需要加入动画。
  动画支持 backgroundColor、barStyle 和 hidden 属性的变化。
• hidden
  设置状态栏是否隐藏。

2.2 Android专用属性

• backgroundColor
  Android 设备上状态栏的背景颜色

<StatusBar backgroundColor={'blue'} />

• translucent
  设置状态栏是否为透明，当状态栏的值为true的时候，应用将会在状态栏下面进行绘制显示。这样在 Android 平台上面就是沉浸式的效果，可以达到 Android 和 iOS 应用显示效果的一致性。该值常常同配置半透明效果的状态栏颜色一起使用。
• StatusBar.currentHeight
  React Native 在 Android 平台为 StatusBar 组件提供了一个静态常量 currentHeight，我们可以通过读取这个常量来得到 Android 手机状态栏的高度。

2.3 iOS专用属性

• barStyle
  用于设置状态栏文字的颜色，其值是枚举类型:

  • default：黑色文字（默认） => dark-content
  • light-content：白色文字

• networkActivityIndicatorVisible
  设定网络活动指示器(就是那个菊花)是否显示在状态栏

• showHideTransition
  通过hidden属性来显示或隐藏状态栏时所使用的动画效果，有两种选择：fade（默认值）、slide

3. SatusBar的使用示例

import { StatusBar } from 'react-native'
//...省略其他代码
render() {
  return (
  <View>
    <StatusBar
      hidden={true}
      />
  </View>
  )
}

---

欢迎加我微信，拉进群交流哦！

微信二维码