React Native屏幕尺寸适配

最新推荐文章于 2024-09-03 08:54:33 发布

浅夏晴空

最新推荐文章于 2024-09-03 08:54:33 发布

阅读量4.3k

点赞数 2

分类专栏：【ReactNative 知识归集】

本文链接：https://blog.csdn.net/gongch0604/article/details/79971588

版权

【ReactNative 知识归集】专栏收录该内容

30 篇文章 4 订阅

订阅专栏

本文介绍了在React Native中实现屏幕适配的方法，包括如何利用Dimensions API获取屏幕尺寸，PixelRatio API进行像素密度处理，以及自定义函数scaleSize和setSpText实现不同设备上的UI元素尺寸调整。

摘要由CSDN通过智能技术生成

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

  比如我们的设计稿一个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'
    },
});