React Native屏幕尺寸适配

   现在的手机品牌和型号越来越多，导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同， 
 

   比如我们的设计稿一个View的大小是300，如果直接写300，可能在当前设备显示正常，但到了其他设备可能就会偏小或者偏大，这就需要我们对屏幕进行适配。 
 

安卓原生的话有自己的适配规则，可以根据不同的尺寸建立不同的文件夹，系统会根据当前的设备尺寸取对应的大小的布局。而RN本身并没有适配规则，而原生的又比较反锁，这就需要我们自己去对屏幕进行适配。

rn中直接写宽高都是dp的

/**
 * 屏幕工具类
 * ui设计基准,iphone 6
 * width:750
 * height:1334
 */
var ReactNative = require('react-native');
var Dimensions = require('Dimensions');
export var screenW = Dimensions.get('window').width;
export var screenH = Dimensions.get('window').height;
var fontScale = ReactNative.PixelRatio.getFontScale();
export var pixelRatio = ReactNative.PixelRatio.get();
const r2=2;
const w2 = 750/r2;``
const h2 = 1334/r2;
/**
 * 设置text为sp
 * @param size  sp
 * @returns {Number} dp
 */
export const DEFAULT_DENSITY=2;
export function setSpText(size:Number) {
    var scaleWidth = screenW / w2;
    var scaleHeight = screenH / h2;
    var scale = Math.min(scaleWidth, scaleHeight);
    size = Math.round((size * scale + 0.5) * pixelRatio / fontScale);
    return size;
}
/**
 * 屏幕适配,缩放size
 * @param size
 * @returns {Number}
 * @constructor
 */
export function scaleSize(size:Number) {
    var scaleWidth = screenW / w2;
    var scaleHeight = screenH / h2;
    var scale = Math.min(scaleWidth, scaleHeight);
    size = Math.round((size * scale + 0.5));
    return size/DEFAULT_DENSITY;
}

   通过Dimensions.get(‘window’).参数来获取屏幕参数 
 

   width和height操作很简单，通常是在约束组件的大小的时候使用，根据百分比显示； 
 

   例如：设置组件的长度为屏幕的90%：width = Dimensions.get(‘window’).width * 0.9 
 

   默认以iPhone6 宽高为基准。 
 

 
  用法 
 

   比如iPhone6 宽度为 1334 
 

   如果在iPhone6上设置宽度为一半。 那么就是 1334 / 2 = 667 
 

   直接 W(667) 就可算出对应的设备缩放后的 宽度了 
 

   宽度为W 函数，高度 H 函数， 
 

   百分比宽高为 WB,HB 
 

   PixelRatio类提供了访问设备的像素密度的方法， 
  参考官网 
 

样式中引用

const styles = StyleSheet.create({
    container: {
        backgroundColor: 'white',
        justifyContent: 'space-between',
        flexDirection: 'row',
        paddingTop: ScreenUtils.scaleSize(22),
        paddingBottom: ScreenUtils.scaleSize(22),
        paddingRight: ScreenUtils.scaleSize(12),
        paddingLeft: ScreenUtils.scaleSize(12),
        alignItems: 'center'
    },
});

React Native屏幕尺寸适配

猜你喜欢