react-native-easy-app 詳解與使用之（四）屏幕適配

react-native-easy-app 是一款爲React Native App快速開發提供基礎服務的純JS庫(支持 IOS & Android)，特別是在從0到1的項目搭建初期，至少能夠爲開發者減小30%的工做量。

react-native-easy-app 主要作了這些工做：
1. 對AsyncStorage進行封裝，開發者只需幾行代碼便可實現一個持久化數據管理器。
2. 對fetch進行封裝，使得開發者只需關注當前App的先後臺交互邏輯和協議，定義好參數設置及解析邏輯便可。
3. 從新封裝了RN的View、Text、Image、FlatList 使用得這些控件在適當的時候支持事件或支持icon與文本，能有效減小布局中的嵌套邏輯。
4. 經過設置一個屏幕參考尺寸，重置XView、XText、XImage的尺寸，實現自動多屏適配

可能有人以爲，RN的適配通常不都是根據目標屏幕的尺寸對當前UI尺寸進行必定比例的縮放麼，直接定義一個獲取縮放比例的方法不就能夠了麼？

一千我的心中，有一千個哈姆雷特，也許個人封裝思路能給你帶來不同的啓發也未可知呢？

UI多屏幕適配

RN平臺默認的尺寸就是不帶單位的，使用的是設備獨立像素，但因爲手機的尺寸也愈來愈多，好比說相同尺寸，像素密不一樣結果致使UI的物理尺寸也不一樣，因此一般來講，咱們們須要根據屏幕的尺寸對UI的尺寸進行必定比例的縮放。

但UI的尺寸屬性太多了，每次都調用相應的尺寸比例方法去計算，不只看着代碼不雅觀並且代碼量也明顯增多，那有沒有更好的辦法呢？

當前開發庫的實現思路是，經過XView、XText、XImage的重定義，將傳入組件的style屬性作一次重置（將全部涉及尺寸的屬性值重置爲乘以縮放比例後的值）。至於UI的尺寸屬性，在React Native源代碼中就能夠找到（目前以白名單的形式定義）。這樣，在使用以上X系列UI組件的時候不須要作任何特別處理，便可自動實現多屏幕適配。

固然，要想X系列組件支持的前提仍是：得設置一個參考屏幕尺寸（設計同窗作UI的時候使用的參考屏幕尺寸），代碼以下：

XWidget.initReferenceScreen(375, 667); //iphone 6 屏幕

咱們找個UI看看適配先後的區別（sample項目的列表頁面，適配先後）：

能夠看到，適配後在5S屏幕上UI比較明顯（相應的UI尺寸縮小了一些）。
UI佈局頁面適配以下（sample項目的UI組件頁面，適配先後）：

依然在5S上表現比較明顯，適配前UI組件高、寬不太協調，特別是Image組件相對比較擁擠，但適配後就天然多了。在Xs Max上，UI組件由以前偏小，後適配後，相對應的都放大了也顯得天然了(大屏、高分辨率屏幕上UI尺寸過小看着比較吃力)

可能有同窗想，X系列組件都作了屏幕適配但一些特別狀況下，可能不須要做適配怎麼辦，好比說外層容器組件（有的時候會設置一個定值），這時候有兩種辦法：

1. 改用系統原生組件
2. 設置X系列組件屬性 raw = {true}，設置了此屬性，當前UI尺寸就不會作任何縮放

因此當你們須要對app的用UI作多屏適配的狀況下，儘量多的使用X系列組件就好了（記得設置參考屏幕哦）

想進一步瞭解，請移步至 npm 或github查看 react-native-easy-app，有源碼及使用示例，待你們一探究竟，歡迎朋友們 Star！