react-native StatusBar状态栏实现之ios安

简介

StatusBar 是 React Native 用来设置并动态改变设备的状态栏的组件，可以通过设置 StatusBar 的样式实现不同页面显示的状态栏不同；
作为跨平台组件，StatusBar 有些属性是通用的，但有些则是 iOS / Android 独有的；所以我们开发时要做好适配。

通用属性

• animated (bool)
  • 指定状态栏的变化是否应以动画形式呈现。目前支持这几种样式：backgroundColor, barStyle和hidden。
• hidden (bool)
  • 是否隐藏状态栏。

常量

• currentHeight 状态栏的当前高度

iOS属性

• barStyle
  • 设置状态栏文本的颜色

enum('default', 'light-content', 'dark-content')

• networkActivityIndicatorVisible (bool)
  • 指定是否显示网络活动提示符。
• showHideTransition
  • 通过hidden属性来显示或隐藏状态栏时所使用的动画效果。默认值为'fade'。

enum('fade', 'slide','none')

仅Android

• backgroundColor color
  • 状态栏的背景色。
• translucent (bool)
  • 指定状态栏是否透明。设置为true时，应用会在状态栏之下绘制（即所谓“沉浸式”——被状态栏遮住一部分）。常和带有半透明背景色的状态栏搭配使用。
• StatusBar.currentHeight
  React Native 在 Android 平台为 StatusBar 组件提供了一个静态常量 currentHeight，我们可以通过读取这个常量来得到 Android 手机状态栏的高度。

StatusBar组件可以同时加载多个。此时属性会按照加载顺序合并（后者覆盖前者）。一个典型的用法就是在使用Navigator时，针对不同的路由指定不同的状态栏样式，如下：

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

方法