【水滴石穿】React Native 組件之SafeAreaView

本文轉載自：https://blog.csdn.net/xiangzhihong8/article/details/80692792
SafeAreaView簡介
ReactNative官方從0.50.1版本開始，加入了針對iPhone X設備齊劉海頁面適配的組件SafeAreaView，為ReactNative開發APP時對iPhone X的頁面適配提供了很大的方便。目前，SafeAreaView只適合iOS設備。
SafeAreaView的使用也非常簡單，只需要將SafeAreaView嵌套在最根級別的視圖中即可，並且在style中加上flex:1等頁面樣式。

<SafeAreaView style={{flex: 1, backgroundColor: '#fff'}}>
  <View style={{flex: 1}}>
    <Text>Hello World!</Text>
  </View>
</SafeAreaView>

需要注意的是，使用了RN來開發頁面時，不要忘了在RN中修改相應NaviBar/TabBar的高度（如isIOS ? 64 : 42）。

為了完成iPhone X的適配工作，我們還需要某些判斷操作，例如下面是判斷iPhone X的工具類。

import {
    PixelRatio,
    Dimensions,
    Platform
} from 'react-native';

export let screenW = Dimensions.get('window').width;
export let screenH = Dimensions.get('window').height;
// iPhoneX
const X_WIDTH = 375;
const X_HEIGHT = 812;

/**
 * 判斷是否為iphoneX
 * @returns {boolean}
 */
export function isIphoneX() {
    return (
        Platform.OS === 'ios' &&
        ((screenH === X_HEIGHT && screenW === X_WIDTH) ||
            (screenH === X_WIDTH && screenW === X_HEIGHT))
    )
}

/**
 * 根據是否是iPhoneX返回不同的樣式
 * @param iphoneXStyle
 * @param iosStyle
 * @param androidStyle
 * @returns {*}
 */

export function ifIphoneX(iphoneXStyle, iosStyle, androidStyle) {
    if (isIphoneX()) {
        return iphoneXStyle;
    } else if (Platform.OS === 'ios') {
        return iosStyle
    } else {
        if (androidStyle) return androidStyle;
        return iosStyle
    }
}

然后我們在適配前進行相關的判斷，然后使用SafeAreaView進行適配即可。例如：

export function ifIphoneX (iphoneXStyle, regularStyle) {  
    if (isIphoneX()) {  
        return iphoneXStyle;  
    } else {  
        return regularStyle  
    }  
} 

然后根據返回的環境，添加不同的StyleSheet樣式即可。

const styles = StyleSheet.create({  
    topBar: {  
        backgroundColor: '#ffffff',  
        ...ifIphoneX({  
            paddingTop: 44  
        }, {  
            paddingTop: 20  
        })  
    },  
})  

SafeAreaView的屬性和View組件的屬性類似，大家可以參照View的使用來給SafeAreaView進行屬性設置