React Native適配安卓IOS劉海屏、異形屏方案

• 首先頂部引入這幾個模塊

import {
	Platform,
    SafeAreaView,
    NativeModules,
    StatusBar
} from "react-native";
const { StatusBarManager } = NativeModules;

• 獲取狀態欄高度

let statusBarHeight;
	if (Platform.OS === "ios") {
	     StatusBarManager.getHeight(height => {
	         statusBarHeight = height;
	     });
	 } else {
	     statusBarHeight = StatusBar.currentHeight;
}

• 渲染的時候使用SafeAreaView(光使用SafeAreaView只能保證ios設備上正常)

 <SafeAreaView
    style={[styles.container, { marginTop: statusBarHeight }]}
 >
     <View
         style={[
             styles.container,
             { width: windows.width },
             bodyStyle ? bodyStyle : ""
         ]}
     >
         {headerLeft && (
             <View style={styles.leftBlock}>{headerLeft}</View>
         )}
         {title && <Text>{title}</Text>}
         {headerRight && (
             <View style={styles.rightBlock}>{headerRight}</View>
         )}
     </View>
</SafeAreaView>