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
    }
}

使用方式：

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

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

2、safe-area-view安全区域
安全区域示意图：

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

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

附iOS判断iphonex的方法：

#define IS_iPhoneX ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(1125, 2436), [[UIScreen mainScreen] currentMode].size) : NO)