react-native屏幕适配文本间距适配(七)

react-native屏幕适配文本间距适配

react native提供了一个类似于手机web端的媒体查询API模块PixelRatio,同时也提供了一个Dimensions原生API，可以利用这两个API模块实现屏幕适配。

思路：

1.文本缩放适配

• 获取设备的像素密度
• 获取屏幕的宽度dp
• 字体大小缩放比例
• 根据dp值获取屏幕实际的像素值
• 计算实际屏幕像素与设计稿的宽度像素值比率
• 计算文字dp值：
  设计稿文本像素值  *  屏幕像素与设计稿的宽度像素值比 / 字体大小缩放比例 + 0.5

2.元素宽高适配

• 获取屏幕实际像素值
•  获取设备的像素密度
• 计算实际屏幕像素与设计稿的宽度像素值比率
• 计算元素的宽度：
  设计稿元素宽度*屏幕像素与设计稿的宽度像素值比/像素密度 + 0.5
  等式：元素的宽度（dp）* 设计稿总宽度（px） =  设计稿元素宽度（px）* 屏幕的总宽度（dp） 

完整代码:

let ReactNative = require('react-native');
// 获取屏幕的dp
let Dimensions = require('Dimensions');
let screenW = Dimensions.get('window').width;
let screenH = Dimensions.get('window').height;
let fontScale = ReactNative.PixelRatio.getFontScale();
let pixelRatio = ReactNative.PixelRatio.get();
// 高保真的宽度和告诉
const designWidth = 720.0;
const designHeight = 1280.0;

// 根据dp获取屏幕的px
let screenPxW = ReactNative.PixelRatio.getPixelSizeForLayoutSize(screenW);
let screenPxH = ReactNative.PixelRatio.getPixelSizeForLayoutSize(screenH);

/**
 * 设置text
 * @param size  px
 * @returns {Number} dp
 */
export function st(size) {
    var scaleWidth = screenW / designWidth;
    var scaleHeight = screenH / designHeight;
    var scale = Math.min(scaleWidth, scaleHeight);
    size = Math.round(size * scale/fontScale + 0.5);
    return size;
}

/**
 * 设置高度
 * @param size  px
 * @returns {Number} dp
 */
export function sh(size) {
    var scaleHeight = size * screenPxH / designHeight;
    size = Math.round((scaleHeight / pixelRatio + 0.5));
    return size;
}

/**
 * 设置宽度
 * @param size  px
 * @returns {Number} dp
 */
export function sw(size) {
    var scaleWidth = size * screenPxW / designWidth;
    size = Math.round((scaleWidth/pixelRatio + 0.5));
    return size;
}
//注以上代码来自简书，超链接丢失

使用时一般考虑根据横向等比例缩放 ，所以使用方法就是 利用设计稿的原始像素来计算dp值：

例如：fontSize:st(size:px)  width:sw(size:px)