React Native宽高适配问题

在React Native开发中，因为各种移动设备尺寸和分辨率的不同，造成尺寸无法统一设置，这就需要进行适配处理，一般的办法如下：

先定义常量保存开发时候手机模拟器的尺寸，如下是iPhone6s的尺寸：

/**
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
*/
import { Dimensions, PixelRatio } from 'react-native';
const BASE_WIN_HEIGHT = 667;
const BASE_WIN_WIDTH = 375;
const currentPixel = PixelRatio.get()  // 当前为iPhone6，值为2

然后写2个函数：

// 根据实际屏幕尺寸转换对应的像素高度

export function getHeight(h) {
    if (!this.height) {
          const {height, width} = Dimensions.get('window');
          this.height = height;
          this.width = width;
    }
      return h / currentPixel * (this.height / BASE_WIN_HEIGHT);
}

// 根据实际屏幕尺寸转换对应的像素宽度
export function getWidth(w) {
      if (!this.width) {
            const {height, width} = Dimensions.get('window');
            this.height = height;
            this.width = width;
      }
      return w / currentPixel * (this.width / BASE_WIN_WIDTH);
}

参数h和w是要设置组件的宽高的2倍值：
比如要设置按钮button的宽和高在iPhone6s中分别是100和30，那么在适配设置中调用上面的函数如下：

width: getWidth(200),
height: getHeight(60),

这样就能适配各种不同尺寸的移动设备了。

字体大小的适配，还是以iPhone 6尺寸为准

import { Dimensions, PixelRatio } from 'react-native';
const BASE_WIN_HEIGHT = 667;  // iPhone 6高度
const BASE_WIN_WIDTH = 375;    // iPhone 6宽度
const currentWidth = Dimensions.get('window').width;   // 当前设备宽度
const currentHeight = Dimensions.get('window').height;    // 当前设备高度
const pixelRatio = PixelRatio.get();      // 返回设备的像素密度
const pixelRatio6 = 2;      // 返回iPhone6的像素密度
const fontScale = PixelRatio.getFontScale();  // 字体大小缩放比例
const scale = Math.min(currentHeight / BASE_WIN_HEIGHT, currentWidth / BASE_WIN_WIDTH);

export function setText (val) {
    val = (val * scale) * pixelRatio / fontScale;
    return val / pixelRatio6;
}