隨著iPhoneX的誕生，UI上也發生了一系列變化。

1、iOS11前導航欄的高度是64，其中狀態列(StatusBar)的高度為20。iPhoneX的狀態列(StatusBar)高度變為了44(感測器區域高度)。

2、iPhoneX的底部增加了虛擬Home區，由於安全區域的原因預設TabBar的高度由49變為83，增高了34(Home區高度)，所以自定義的底部TabBar也需要需改其適配方案。

為了適配iPhone X，前輩們提供了一些解決方案：

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


export function
 
 isIphoneX() {
    let dimen = Dimensions.get('window');
    return (
        Platform.OS === 'ios' &&
        !Platform.isPad &&
        !Platform.isTVOS &&
        (dimen.height === 812 || dimen.width === 812)
    );
}

export function ifIphoneX(iphoneXStyle, regularStyle) {
 

    if (isIphoneX()) {
        return iphoneXStyle;
    } else {
        return regularStyle
    }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

使用方式：

import { ifIphoneX } from 'react-native-iphone-x-helper'
 style:{
        height: 60,
        backgroundColor: 'transparent',
        ...ifIphoneX({
            paddingTop: 50
 

        }, {
            paddingTop: 20
        })
    },

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

import { isIphoneX } from 'react-native-iphone-x-helper'
if (isIphoneX()) {
    // do this...
} else {
    // do that...
}

• 1
• 2
• 3
• 4
• 5
• 6

2、safe-area-view安全區域 

寧波最好的整形醫院http://www.lyxcl.org/
寧波好的整形醫院http://www.lyxcl.org/
安全區域示意圖： 

<SafeAreaView>
  <View>
    <Text>test</Text>
  </View>
</SafeAreaView>

• 1
• 2
• 3
• 4
• 5