react-native 判断是不是IPhone X

作者: 大猪大猪 | 来源:发表于2018-05-09 22:37 被阅读354次

    自从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>
    

    相关文章

      网友评论

        本文标题:react-native 判断是不是IPhone X

        本文链接:https://www.haomeiwen.com/subject/hmharftx.html