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;
複製代碼