react-native 判断是不是IPhone X

自从IphoneX出来后，各种软件就开始出现兼容问题，不管是原生还是RN的程序都有这种问题，RN如何判断是否是IPhoneX机型呢?可看如下工具代码。

使用教程

新建ScreenUtil.js

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

const X_WIDTH = 375;
const X_HEIGHT = 812;

const { height: D_HEIGHT, width: D_WIDTH } = Dimensions.get('window');

const { PlatformConstants = {} } = NativeModules;
const { minor = 0 } = PlatformConstants.reactNativeVersion || {};

module.exports = {
    isIphoneX: function(){
        if (Platform.OS === 'web') return false;
        if (minor >= 50) {
            return DeviceInfo.isIPhoneX_deprecated;
        }
        return (
            Platform.OS === 'ios' &&
            ((D_HEIGHT === X_HEIGHT && D_WIDTH === X_WIDTH) ||
                (D_HEIGHT === X_WIDTH && D_WIDTH === X_HEIGHT))
        );
    }
};

此方法是从react-navigation提取出来的代码，也可使用react-navigation中的SafeAreaView组件进行包住，也可解决此类兼容问题。

工具类使用

import {isIphoneX} from 'ScreenUtil';

const STATUSBAR_HEIGHT = Platform.OS === 'ios' ?(isIphoneX()?44:20):StatusBar.currentHeight;

演示中使用的react-navigation版本为1.5.12

import { SafeAreaView } from 'react-navigation';

<SafeAreaView>
  <Text>hello</Text>
</SafeAreaView>