最近在用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;
}
网友评论