最近在用RN開發(fā)一款企業(yè)版的iPad版項目，在開發(fā)過程中不免會遇到適配的問題。比如長度的適配善绎，字體大小的適配。一般情況下诫尽，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屏曹洽，其他為普屏)
在開發(fā)過程中，我們不必糾結于屏幕的分辨率是多少辽剧，我們只要關注屏幕的點就行了送淆。蘋果為了方便開發(fā)人員開發(fā)，在iOS中統一使用點（Point）對界面元素的大小進行描述怕轿。而點和像素的換算關系為：Retina屏 1點 = 2像素偷崩，普屏 1點 = 1像素。
當我們仔細觀察上面的數據后發(fā)現撞羽，除了iPad Pro(12.9)的點為1024x1366阐斜，其他iPad設備的點都為768x1024。所以我們只需考慮這兩個點之間的比例關系就行了诀紊。屏寬比：1024 / 768 = ?1.333333333谒出， 屏高比：1366 / 1024 = 1.333984375， 經過計算我們發(fā)現兩者之間的比例關系非常接近 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了遥赚，達到了適配效果。在實際開發(fā)中阐肤，如果遇到 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;
}
