适配.md

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)。一定会返回一个整数数值。