ReactNative 响应式单位 rpx

日前在 ReactNative 开发中有遇到如何写出符合多种 viewport 宽度的样式的问题。在常规的移动端开发中，可以借助 rem、vw 等单位，那么在使用 ReactNative 时有没有类似的方案呢？最近进行小程序开发时注意到它们有 rpx 这种单位：

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

受其启发，决定在代码中实现类似的单位，当需要自适应的时候写字符串 '20rpx'，不需要的时候正常写数字 20。

// style-sheet.js
import { StyleSheet, PixelRatio } from 'react-native';

const REG = /[\d\.]rpx/;

function pre(obj) {
  Object.keys(obj).forEach(key => {
    const value = obj[key];
    if (typeof value === 'object') {
      obj[key] = pre(value);
    } else if (typeof value === 'string' && REG.test(value)) {
      obj[key] = PixelRatio.getPixelSizeForLayoutSize(parseFloat(value) / 4);
    }
  });

  return obj;
}

function create(obj) {
  obj = pre(obj);
  return StyleSheet.create(obj);
}

const BORDER_COLOR = '#e6e6e6';

const SS = {
  hairlineWidth: StyleSheet.hairlineWidth,
  create,
  pre,
  absoluteFillObject: StyleSheet.absoluteFillObject,
  common: {
    backgroundColor: '#F2F3F8',
    center: {
      justifyContent: 'center',
      alignItems: 'center',
      display: 'flex'
    },
    centerH: {
      alignItems: 'center',
      display: 'flex',
      flexDirection: 'row'
    },
    centerV: {
      alignItems: 'center',
      display: 'flex',
      flexDirection: 'column'
    },
    primaryGreen: '#75CA2A',
    primaryDarkGreen: '#62A427',
    borderColor: BORDER_COLOR,
  }
}

export default SS;