React Native适配

默认单位 dp

dp："dots per inch" 的缩写，“每英寸的像素数”，即像素密度 当屏幕像素密度为 160dpi的 时候 1dpi = 1px

百分比布局,实现一个适配的工具函数

 import { Dimensions,PixelRatio } from 'react-native'

/**
 *  像素密度参考
PixelRatio.get() === 1
mdpi Android 设备 (160 dpi)
PixelRatio.get() === 1.5
hdpi Android 设备 (240 dpi)
PixelRatio.get() === 2
iPhone 4, 4S
iPhone 5, 5c, 5s
iPhone 6
xhdpi Android 设备 (320 dpi)
PixelRatio.get() === 3
iPhone 6 plus
xxhdpi Android 设备 (480 dpi)
PixelRatio.get() === 3.5
Nexus 6
 */


/**
 * 屏幕适配工具类
 * ui设计基准,iphone 6
 * width:750 px
 * height:1334 px
 */

// 获取屏幕的dp
const screenWidth = Dimensions.get('window').width
const screenHeight = Dimensions.get('window').height
const fontScale = PixelRatio.getFontScale()
const pixelRatioValue = PixelRatio.get()

// 设计图宽 高
const designWidth = 750.0
const designHeight = 1334.0

// 将一个布局尺寸(dp)转换为像素尺寸(px)。
const screenPxW = PixelRatio.getPixelSizeForLayoutSize(screenWidth);
const screenPxH = PixelRatio.getPixelSizeForLayoutSize(screenHeight);

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

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

/**
 * 设置宽度
 * @param size  px
 * @returns {Number} dp
 */
export function fitW(size) {
    const scaleWidth = size * screenPxW / designWidth
    return Math.round((scaleWidth/pixelRatioValue + 0.5))
}

访问设备的像素密度的方法: PixelRatio

• get() 返回设备的像素密度
• getFontScale() 如果没有设置字体缩放大小，它会直接返回设备的像素密度。
• getPixelSizeForLayoutSize() 将一个布局尺寸(dp)转换为像素尺寸(px)。一定会返回一个整数数值。