最近在用RN開發(fā)一款企業(yè)版的iPad版項目，在開發(fā)過程中不免會遇到適配的問題。比如長度的適配，字體大小的適配。一般情況下，F(xiàn)lex布局能幫我們解決一些適配問題，但大多數(shù)情況下，需要我們自己去解決。在此，我給大家介紹一下項目中是如何實現(xiàn)不同尺寸的iPad屏幕適配的。

首先，我們來看一組數(shù)據(jù)：

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中統(tǒng)一使用點（Point）對界面元素的大小進行描述。而點和像素的換算關系為：Retina屏 1點 = 2像素，普屏 1點 = 1像素。

當我們仔細觀察上面的數(shù)據(jù)后發(fā)現(xiàn)，除了iPad Pro(12.9)的點為1024x1366，其他iPad設備的點都為768x1024。所以我們只需考慮這兩個點之間的比例關系就行了。屏寬比：1024 / 768 = ?1.333333333， 屏高比：1366 / 1024 = 1.333984375， 經(jīng)過計算我們發(fā)現(xiàn)兩者之間的比例關系非常接近 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。根據(jù) LengthStyles.js 和FontSizeStyles.js 代碼，在1024x1366的尺寸中，Text 的寬就會變成60，字體大小就會變成16了，達到了適配效果。在實際開發(fā)中，如果遇到 LengthStyles.js 中沒有的長度，自己往里面添加就行，往FontSizeStyles.js 中添加新的字體大小也是一樣。

在適配的過程中，還需要注意一個地方，就是當標注的長度不為3的倍數(shù)怎么辦？因為非3的倍數(shù)，你求得長度的 4/3 倍也就不為整數(shù)，如果UI要求比較高的話就四舍五入。如果UI要求還好的話，你就把非3倍數(shù)的長度加1或者減1來變成3的倍數(shù)，這樣計算起來就比較容易了。

以上就是適配不同屏幕iPad的方法了。其實適配其他的尺寸，這個方法也是可以的。

很簡單的方法，說起來只要幾分鐘，寫起來卻要幾個小時，我要靜靜……

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

這里提供一種另一種方法：

import{ Dimensions } from 'react-native';

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

const basePx = 768 (多數(shù)iPad設備的點寬)

export default function pixelValue(px) {

return px * deviceW / basePx;

}