React Native適配iphonex的方案

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

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

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

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

1、iphone-x-helper 
項目地址：https://github.com/ptelad/react-native-iphone-x-helper 
主要代碼如下：

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/
安全區域示意圖： 

項目地址： https://github.com/react-community/react-native-safe-area-view 
使用方式：

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

1 2 3 4 5