自從IphoneX出來(lái)后，各種軟件就開(kāi)始出現(xiàn)兼容問(wèn)題，不管是原生還是RN的程序都有這種問(wèn)題，RN如何判斷是否是IPhoneX機(jī)型呢?可看如下工具代碼论悴。
使用教程
新建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提取出來(lái)的代碼，也可使用react-navigation中的SafeAreaView組件進(jìn)行包住墓律，也可解決此類(lèi)兼容問(wèn)題膀估。
工具類(lèi)使用
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>
