2019-05-31 React Native 的沉浸式状态栏

默认情况下，如果不对状态栏进行处理，App的状态栏在Android和iOS下的表现不一样：

• Android平台下默认是非沉浸式状态栏，也就是用户界面和状态栏并排显示，；
• iOS平台下默认是沉浸式状态栏，也就是用户界面侵入了状态栏，所以iOS端是无需控制状态栏的颜色的。

react native 提供了一个组件StatusBar来控制状态栏，其中以下属性很重要：

• backgroundColor：android可用，可以控制状态栏的颜色；
• translucent: android可用，默认为false，设置为true时，就变成沉浸式状态栏。

为了适配iOS的刘海屏，我们一般会用react-navigation 的 SafeAreaView 来包裹我们的视图，默认情况下forceInset={{top: 'always', bottom: 'always'}}，就强制让子组件在安全区域内显示了。这就造成一个问题，在iOS上，就无法做到沉浸式状态栏了, 危险区域（状态栏等）的背景颜色就是SafeAreaView的背景颜色。

而Android上的刘海屏，SafeAreaView 就没作用了。

综上，要在Android 和 iOS 中都使用沉浸式状态栏，并且还需要 SafeAreaView (iOS端底部需要)，配置如下：
forceInset={{top: 'never', bottom: 'always'}}， 这样iOS端就可以是沉浸式状态栏了。
导航栏需要自定义，因为是沉浸式状态栏，导航栏要侵入状态栏，导航栏高度不再是44，而是44+状态栏高度，获取当前手机的状态栏高度： StatusBar.currentHeight (就是RN官方提供的StatusBar)。