「React Native」适配方案

一、android、ios一般用作适配的单位是dp、pt。

在480 * 800分辨率中，3.7屏幕对角线英寸数的设备效果图如下

20170829162412459.png

在480 * 800分辨率中，5.1屏幕对角线英寸数的设备效果图如下

20170829162422477.png

通过以上的分析，dp在小尺寸手机展示占屏宽比更大，在大尺寸手机展示占款比更小。这也是符合以前大屏手机的理念（大手机展示更多的内容）

二、React Native中的单位是什么？

All dimensions in React Native are unitless, and represent density-independent 
pixels. Setting dimensions this way is common for components that should always 
render at exactly the same size, regardless of screen dimensions.

rn会自动转成原生的dp、pt。dp也叫dip，是device independent pixels。设备不依赖像素的一个单位。在不同的像素密度的设备上会自动适配。

三、React Native兼容处理。

产品现在越来越期望展示一致性，期望大屏体验度更好，起到同样的内容展示，有放大的感觉。但是直接采用数字用于布局，在大屏手机的展示的内容虽然会更多，但是不够清晰。于是封装了一个简单的屏幕适配工具，根据ui给的设计图宽度作为基础宽度像素。

/**
 * 屏幕适配
 */
import { Dimensions } from 'react-native';
// 设计图上的比例，宽度
let basePx = 375;
const deviceW = Dimensions.get('window').width;
/**
 * 适配宽高
 * @param {width、height} px 
 */
export default function px2dp(px) {
  return px * deviceW / basePx;
}