React Native 适配iPad

最近在用RN开发一款企业版的iPad版项目，在开发过程中不免会遇到适配的问题。比如长度的适配，字体大小的适配。一般情况下，Flex布局能帮我们解决一些适配问题，但大多数情况下，需要我们自己去解决。在此，我给大家介绍一下项目中是如何实现不同尺寸的iPad屏幕适配的。

首先，我们来看一组数据：

iPad设备(尺寸)                         分辨率                    点

iPad Pro(12.9 inch)          （2048x2732）  （1024x1366）                    

iPad Pro(9.7 inch)            （1536x2048）  （768x1024）

iPad1/2(9.7 inch)               （768x1024）    （768x1024）

iPad3/4/air(9.7 inch)         （1536x2048）  （768x1024）

iPad mini(9.7 inch)             （768x1024）    （768x1024）

iPad mini2(7.9 inch)         （1536x2048）     (768x1024）

                 (斜粗字体为Retina屏，其他为普屏)

在开发过程中，我们不必纠结于屏幕的分辨率是多少，我们只要关注屏幕的点就行了。苹果为了方便开发人员开发，在iOS中统一使用点（Point）对界面元素的大小进行描述。而点和像素的换算关系为：Retina屏 1点 = 2像素，普屏 1点 = 1像素。

当我们仔细观察上面的数据后发现，除了iPad Pro(12.9)的点为1024x1366，其他iPad设备的点都为768x1024。所以我们只需考虑这两个点之间的比例关系就行了。屏宽比：1024 / 768 =  1.333333333， 屏高比：1366 / 1024 = 1.333984375， 经过计算我们发现两者之间的比例关系非常接近 4 : 3 。这样，我们在设置长度和字体的大小时，按着4:3的比例来进行就能很完美地适配了。

下面来加上部分RN代码来具体说明一下：

// LengthStyles.js  

import { Dimensions } from 'react-native';                                                                     const { width } = Dimensions.get('window');    

let LengthStyles = {};                                                                       LengthStyles.lengthRank1 = 3;                                                       LengthStyles.lengthRank2 = 6;                                                           LengthStyles.lengthRank15 = 45;                                                       LengthStyles.lengthRank20 = 60;                                                                                 if(width >1100){                                                                               LengthStyles.lengthRank1 = 4;                                                       LengthStyles.lengthRank2 = 8；                                                     LengthStyles.lengthRank15 = 60;                                                     LengthStyles.lengthRank20 = 80;                                                                                         }；                                                                                                                                  export default LengthStyles;

// FontSizeStyles.js

import { Dimensions } from 'react-native';                                                                     const { width } = Dimensions.get('window');

let FontSizeStyles = {};                                                                      FontSizeStyles.lengthRank1 = 9;                                                      FontSizeStyles.lengthRank2 = 12;                                                          FontSizeStyles.lengthRank3 = 15;                                                      FontSizeStyles.lengthRank4 = 18;                                                                                if(width >1100){                                                                              FontSizeStyles.lengthRank1 = 12;                                                      FontSizeStyles.lengthRank2 = 16；                                                    FontSizeStyles.lengthRank3 = 20;                                                    FontSizeStyles.lengthRank4 = 24;                                                                                        }；                                                                                                                                  export default FontSizeStyles;

这个两个文件可以放在同一个文件夹styles下，然后建一个index.js来引一下：

import FontSizeStyles from './FontSizeStyles';                                                           import LengthStyles from './LengthStyles';

export {                                                                                                          FontSizeStyles,                                                                                                    LengthStyles                                                                                                                      }

以后调用的话，直接 import {FontSizeStyles，LengthStyles } from 'xx/../styles' 即可。

如标注图尺寸是768x1024，其中一个Text 的宽度为45 (width:45)，我们在给这个 Text 的 width 赋值时就写成 width:LengthStyles.lengthRank15。如果这个Text的字体大小为12 (fontSize: 12), 我们给这个Text的 fontSize 赋值时就写成 fontSize:FontSizeStyles.lengthRank2。根据 LengthStyles.js 和FontSizeStyles.js 代码，在1024x1366的尺寸中，Text 的宽就会变成60，字体大小就会变成16了，达到了适配效果。在实际开发中，如果遇到 LengthStyles.js 中没有的长度，自己往里面添加就行，往FontSizeStyles.js 中添加新的字体大小也是一样。

在适配的过程中，还需要注意一个地方，就是当标注的长度不为3的倍数怎么办？因为非3的倍数，你求得长度的 4/3 倍也就不为整数，如果UI要求比较高的话就四舍五入。如果UI要求还好的话，你就把非3倍数的长度加1或者减1来变成3的倍数，这样计算起来就比较容易了。

以上就是适配不同屏幕iPad的方法了。其实适配其他的尺寸，这个方法也是可以的。

很简单的方法，说起来只要几分钟，写起来却要几个小时，我要静静……

=====2017.8.1更新====

这里提供一种另一种方法：

import{ Dimensions } from 'react-native';

const deviceW = Dimensions.get('window').width

const basePx = 768 (多数iPad设备的点宽)

export default function pixelValue(px) {

return px * deviceW / basePx;

}