React Native 获取状态栏高度，实现沉浸式状态栏

开发 App 的时候，常常需要做出沉浸式状态栏的效果。

在 iOS 平台，默认就是沉浸式的，View 的内容会从屏幕顶部开始绘制，若不进行处理，就会被状态栏覆盖。因此可以手动获取状态栏的高度，用样式留出状态栏的空间，避免内容被状态栏覆盖。

import { NativeModules } from 'react-native';

const { StatusBarManager } = NativeModules;

// iOS Only
StatusBarManager.getHeight(statusBarHeight => {
  console.log(statusBarHeight)
});
复制代码

不过，在 Android 平台，默认又不是沉浸式的。需要如下操作才能达到沉浸式效果。

<StatusBar translucent={ true } backgroundColor="transparent" />
复制代码

在 Android 平台，获取状态栏高度就简单多了。

import { StatusBar } from 'react-native';

const statusBarHeight = StatusBar.currentHeight;
复制代码