自从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>
网友评论