React Native 中的状态栏(Android沉浸式)

在实际项目中，咱们经常须要根据页面的不一样去修改状态栏的表现。例如：页面头部图片延伸到状态栏下而且状态栏透明；状态栏的颜色和标题栏的颜色相同；状态栏内容颜色的深浅变化。
在此以前，我写了一篇React Navigation 构建 Android 和 iOS 统一的 UI的文章，里面简单的说到了 Android 状态栏的一些设置。后来我发现并非我想的那么简单，所以经过这篇博客进行补充，文中会更加详细的介绍状态栏相关的内容以及 React Native 项目中如何去控制状态栏，使应用在 iOS 和 Android 平台上都具备很好的表现。

示例代码我上传到了 GitHub:https://github.com/hezhii/rn_...

预备知识

在正式开始以前，我先介绍一些我目前了解下来的相关知识，为后面的内容进行一些铺垫。

iOS 中的状态栏

在 iOS 中，页面默认全屏（状态栏不占空间），状态栏内容默认是深色。由于页面全屏，因此若是咱们不进行处理，内容会跑到状态栏下面去。同时，因为 iPhone X 等刘海屏手机的出现，致使状态栏的高度发生了变化，由以前的 20 变成了 34。为了解决此问题，咱们能够手动给顶部组件设置 paddingTop（值根据机型判断），或者使用 SafeAreaView 组件。

在 iOS 中咱们只用处理好安全区域的问题，而后根据页面的不一样去设置内容的颜色深浅便可。

Android 中的状态栏

在 Android 中，页面默认非全屏（状态栏占空间），状态栏内容默认是浅色。

Android 中对状态栏的支持经历了几个版本：

• Android4.4（API 19） ~ Android 5.0（API 21）:经过 FLAG_TRANSLUCENT_STATUS 设置页面为全屏且状态栏半透明（浅灰色）。
• Android 5.0（API 21）：提供了 android:statusBarColor 属性和 setStatusBarColor方法用来设置状态栏的颜色。
• Android 6.0（API 23）：经过 SYSTEM_UI_FLAG_LIGHT_STATUS_BAR 支持设置状态栏内容为深色。

其中，若是想要设置状态栏颜色，则不能设置 FLAG_TRANSLUCENT_STATUS。

在 Android 应用中，每一个 Activity 都对应一个状态栏。这意味着，为一个页面设置状态栏不会对其余页面的状态栏形成影响。

React Native 中的状态栏

React Native 官方提供了 StatusBar 组件用于控制状态栏，支持设置内容深浅色，状态栏背景（Android）等。

StatusBar 能够同时添加多个，而属性则会按照加载顺序合并（后者覆盖前者）。

不一样于 Android 中的状态栏，在 React Native 中状态栏是公用的，任何一个地方修改状态栏都会致使状态栏发生变化，即便切换到了其余未设置的页面。所以，咱们须要在每一个页面渲染时都设置一下相应的状态栏，或是在离开设置了状态栏的页面时重置状态栏。

实际案例

在了解了必要的知识后，让咱们经过一个实际案例来看看咱们须要作什么以及怎么作才更好。

在这个案例中，有三个页面：主页，个人，登陆。其中“主页”和“个人”是两个标签页，“主页”头部有背景图片，“个人”页面顶部是蓝色，“登陆”页面顶部为白色。页面效果以下图。

“主页”和“个人”页面使用自定义的 Header，该组件会根据当前设备，获取状态栏的高度：

const STATUS_BAR_HEIGHT = isiOS() ? (isiPhoneX() ? 34 : 20) : StatusBar.currentHeight

其中判断设备使用的下面的方法：

// iPhone X、iPhone XS
const X_WIDTH = 375;
const X_HEIGHT = 812;

// iPhone XR、iPhone XS Max
const XSMAX_WIDTH = 414;
const XSMAX_HEIGHT = 896;

const DEVICE_SIZE = Dimensions.get('window');
const { height: D_HEIGHT, width: D_WIDTH } = DEVICE_SIZE;

export const isiOS = () => Platform.OS === 'ios'

export const isiPhoneX = () => {
  return (
    isiOS() &&
    ((D_HEIGHT === X_HEIGHT && D_WIDTH === X_WIDTH) ||
      (D_HEIGHT === X_WIDTH && D_WIDTH === X_HEIGHT)) ||
    ((D_HEIGHT === XSMAX_HEIGHT && D_WIDTH === XSMAX_WIDTH) ||
      (D_HEIGHT === XSMAX_WIDTH && D_WIDTH === XSMAX_HEIGHT))
  );
};

获取到状态栏的高度以后，根据当前是否是全屏（fullSreen 属性为 true 或者是 iOS 设备）来设置自身高度和 paddingTop，标题栏高度统一设置为44。

const headerStyle = [
  styles.header,
  (fullScreen || isiOS()) && {
    height: STATUS_BAR_HEIGHT + HEADER_HEIGHT,
    paddingTop: STATUS_BAR_HEIGHT
  }
]

“登陆”页面的 Header 则是 react-navigation 默认的 Header 组件，在 Android 中标题栏高度被设置为 56。

处理状态栏的问题

从上图的案例中，能够发现如下几点问题：

• iOS 设备中，状态栏内容的颜色显示不正确，“主页”和“个人”页面状态栏应该是浅色。
• Android 设备中，“主页”的状态栏应该是透明的，而且图片应该延伸到状态栏下。
• Android 设备中，“个人”页面状态栏颜色应该也是蓝色。

为了让应用表现得更好，咱们须要根据页面动态的调整状态栏。React Native 为开发者提供了 StatusBar 组件去控制状态栏。

StatusBar 组件控制状态栏

咱们在“主页”中，设置状态栏内容为“浅色”，背景色为透明，translucent 为 true。而后，“主页”和“个人”页面的 Header 都添加 fullScreen 属性。效果以下：

从图中能够看到，由于页面路由是 js 层作的，整个应用对应一个 StatusBar，虽然“个人”和“登陆”页面都没有设置状态栏，但状态栏也是透明的。

这样就有一个问题，“登陆”页面其实使用默认效果便可，可是因为其余页面设置了状态栏，致使进入到“登陆”页面时效果就不对了。因此，每一个页面都须要设置相应的状态栏，由于状态栏可能被其余页面改变。

接下来，在“登陆”页面设置状态栏为白色且内容为深色：

<StatusBar translucent={false} backgroundColor='#fff' barStyle="dark-content" />

如今“登陆”页面的效果就和指望的同样了，当咱们从“登陆”页面返回到主界面时，状态栏会切换回以前的状态，可是有一点延时。按照前面的经验，当从登陆页面回来时，状态栏应该还是白色且内容深色。由于返回时，前面的页面不会从新渲染，状态栏应该会保持当前的状态。可是状态栏却自动调整成了以前的状态，虽然有一点延时。我在 react-navigation 的 GitHub issue 中发现有人提到，当离开 route时，会自动的重设状态栏。我没有具体研究，但我认同这一点，这必然是某处作了此类处理。

那为何会有延时呢？我猜想这应该是自动重置状态栏的时机致使的。我尝试增长了一个注册页面（由登陆页面点击按钮进入），并设置状态栏为红色。而后，我在登陆页面监听了 willFocus 和 didFocus 事件，分别在事件的处理函数中，将状态栏设置为白色。结果是，在 willFocus 中处理是咱们指望的结果，而 didFocus 中处理和默认不处理时是同样的。

到这里，咱们基本能够得出一个结论：若是咱们要在 app 中调整状态栏，稳妥的作法是在每个页面 willFocus 时设置其相应的状态栏，除非能确保前一个页面的状态栏和自身相同。

由于这个功能十分通用，因此咱们能够经过一个高阶组件来完成这件事：

export const setStatusBar = (statusbarProps = {}) => WrappedComponent => {
  class Component extends React.PureComponent {
    constructor(props) {
      super(props)
      this._navListener = props.navigation.addListener('willFocus', this._setStatusBar)
    }

    componentWillUnmount() {
      this._navListener.remove();
    }

    _setStatusBar = () => {
      const {
        barStyle = "dark-content",
        backgroundColor = '#fff',
        translucent = false
      } = statusbarProps
      StatusBar.setBarStyle(barStyle)
      if (isAndroid()) {
        StatusBar.setTranslucent(translucent)
        StatusBar.setBackgroundColor(backgroundColor);
      }
    }

    render() {
      return <WrappedComponent {...this.props} />
    }
  }

  return hoistNonReactStatics(Component, WrappedComponent);
}

经过装饰器的方式使用也十分简单：

@setStatusBar({
  barStyle: 'light-content',
  translucent: true,
  backgroundColor: 'transparent'
})
export default class Home extends React.PureComponent {
 ... 
}

设置 Android 全屏且状态栏透明

除了在 js 层经过 StatusBar 组件设置状态栏的颜色、半透明等，咱们也能够先将 Android 的状态栏设置为全屏且状态栏透明，这样 Android 的表现就和 iOS 同样，能够统一的去处理。

在 MainActivity.java 中添加下面的代码，能够设置全屏且状态栏透明：

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    View decorView = getWindow().getDecorView();
    decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);
    if (Build.VERSION.SDK_INT >= 21) {
        getWindow().setStatusBarColor(Color.TRANSPARENT);
    }
}

设置完成后的效果以下图（没有处理 paddingTop）。

如今 Android 状态栏的表现就和 iOS 同样了，处理的时候统一按照 iOS 的处理逻辑便可，只是在 Header 的高度以及 paddingTop 的计算上不一样。

此外，还须要注意 react-native 的 Header 没有处理 Android 全屏的状况，所以咱们须要在 Android 平台下修改 headerStyle:

defaultNavigationOptions: {
  headerStyle: {
    ...Platform.OS === 'android' && {
      height: StatusBar.currentHeight + 44,
      paddingTop: StatusBar.currentHeight
    }
  }
}

总结

React Native 中想要让状态栏表现得更好仍是须要作一些工做的。如今看来其实使用 StatusBar 组件更加的容易一点，由于即便在 Android 原生层面设置了全屏和透明状态栏，最后仍是须要根据页面去设置状态栏内容的颜色，因此还不准统一的在 js 层去作，经过高阶组件的方式也不是很麻烦。

更多资料分享欢迎Android工程师朋友们加入安卓开发技术进阶互助：856328774免费提供安卓开发架构的资料（包括Fultter、高级UI、性能优化、架构师课程、 NDK、Kotlin、混合式开发（ReactNative+Weex）和一线互联网公司关于Android面试的题目汇总。