React Native屏幕适配工具封装（react native desktop）

由于项目中有一个问题没有解决，那就是不同手机屏幕的尺寸是不一样的，这尺寸是一个大问题，越到最后需要修改的尺寸越多，所以今天我抽空研究了一下，首先回忆，android的屏幕尺寸是根据不同手机的values里面的值来进行适配的，但是RN是作桥接到android的，所以在andoid values文件夹中获取尺寸数据是有点困难，然后就开始百度搜索，百度给出的答案是,主要看公式:

设计稿元素宽度（px） / 设计稿总宽度（px） = 元素的宽度（dp） / 屏幕的总宽度（dp）

公式先在上面放着，等会解释，先来解释RN设计稿单位与RN单位，设计稿的单位是px，rn的单位是dp，代码中输入的纯阿拉伯数字就是px也就是设计稿，rn就是通过自身的java或者ObjectC语言算出来的单位dp，因为设计稿元素宽度、设计稿总宽度，屏幕总宽度已知，要求的是元素的宽度，所以:

元素的宽度（dp）= 设计稿元素宽度（px）* 屏幕的总宽度（dp） / 设计稿总宽度（px）

以上算法是不同屏幕之间的尺寸适配，但有时，我们的ui设计师给我们的图片大小是px的，或者是dp的，这时候就需要用到rn官方给出的api:

export const px2dp = px => PixelRatio.roundToNearestPixel(px);
export const dp2px = dp => PixelRatio.getPixelSizeForLayoutSize(dp);

上面两种尺寸适配我封装了一个工具类,代码如下:

import {Dimensions, PixelRatio} from 'react-native';
const designWidth = 750;
const designHeight = 1334;
export const width = Dimensions.get('window').width;
export const height = Dimensions.get('window').height;
export const p2dWidth = px => {
  return px * (width / designWidth);
};
export const p2dHeight = px => {
  return px * (height / designHeight);
};
export const px2dp = px => PixelRatio.roundToNearestPixel(px);
export const dp2px = dp => PixelRatio.getPixelSizeForLayoutSize(dp);

需要注意的似:rn中获取的屏幕宽度或者高度是dp，如代码:

export const width = Dimensions.get('window').width;

上面获取到屏幕尺寸就不需要再继续转dp了，因为自身就是dp单位。

完整代码：

/**
 * React Native 适配工具类
 * 以iPhone6为基准
 */

import {
    Dimensions,
    PixelRatio,
  } from 'react-native';
  
  // iPhone6 尺寸
  const defaultDevice = {
    width: 375,
    height: 667
  }
  
  // 设备的宽
  const {
    width: deviceWidth
  } = Dimensions.get('window');
  
  // 字体大小缩放比例(Android下可设置字体大小)
  let fontScale = PixelRatio.getFontScale();
  
  // 获取缩放比例
  const scale = deviceWidth / defaultDevice.width;
  
  /**
   * 设置text
   * 如Android设备下不需要根据系统设置做字体缩放，可全面使用ScaleSize
   * @param {number} size
   * @returns {number}
   */
  export const ScaleText = size => {
    size = Math.round(size * scale * fontScale);
    return size;
  }
  
  /**
   * 设置size
   * @param {number} size
   * @returns {number}
   */
  export const ScaleSize = size => {
    size = Math.round(size * scale);
    return size;
  }

使用

const styles = StyleSheet.create({
content: {
width: ScaleSize(100),
fontSize: ScaleText(18)
}
})