是一款為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的AsyncStorage本身就很簡單，自己封裝也就幾十行代碼的工作量，為什麼還要使用第三方庫？
一千個人心中，有一千個哈姆雷特，也許我的封裝思路能給你帶來不一樣的啟發也未可知呢？
資料存儲（AsyncStorage）
RN平台提供的AsyncStorage有一些基礎方法：setItem，getItem，removeItem，getAllKeys，這些是promise模式的并且AsyncStorage隻支援對純字元串的存取，是以我們不便于直接在代碼中去直接調用這些方法，我們得對AsyncStorage做一次封裝，怎樣封裝能使我們更友善快捷的通路本地存取呢？
我們來看下通過 react-native-easy-app 庫的XStorage，我們可以怎樣通路AsyncStorage：
1、核心代碼實作
import { XStorage } from 'react-native-easy-app';
import { AsyncStorage } from 'react-native';
let RNStorage = { // 自定義對象
hasLogin: undefined,
customerId: undefined,
userInfo: undefined
};
XStorage.initStorage(RNStorage,AsyncStorage, () => { // 初始化自定義資料管理器
RNStorage.customerId = '123456';
RNStorage.hasLogin = true;
RNStorage.userInfo = {name: 'zhangsan', age: 30};
console.log(JSON.stringify(RNStorage)) // 列印資料管理器的内容
}) 執行完上面的代碼後我們看看控制台輸出：
再通過Root Explorer 檢視一下目前App的data/data/{package}/database 下資料表的内容：
😲什麼？上面的代碼中并沒有做任何資料庫的存儲操作啊，為什麼指派給RNStorage的資料卻被存到了本地資料庫中呢？我們先看上面的代碼中做了什麼：
- 定義了一個自定義對象RNStorage
- 将自定義對象傳給XStorage.initStorage 進行初始化
- 在初始化完成後對RNStorage的屬性進行了指派
- 列印RNStorage的内容
由此可見，資料的存儲操作必定是上面的第2、3步引起的。我們進入XStorage的源碼看看，裡面做了什麼：
- 源代碼 1
Object.keys(targetObj).map(key => {
const keyStr = newKey(Tag, key);
Object.defineProperty(targetObj, key, {
get: () => {
return this[keyStr]
},
set: (value) => {
try {
this[keyStr] = value;
const valueStr = (typeof value === 'object') ? JSON.stringify(value) : String(value);
keyValuesPairs.push([keyStr, valueStr])
} catch (exception) {
console.log(exception && exception.message);
}
},
})
});
setInterval(() => {
if (!isEmpty(keyValuesPairs)) {
let saveDataArray = [...keyValuesPairs];
keyValuesPairs = []; //清空原鍵值對數組
AsyncStorage.multiSet(saveDataArray, () => {
dataChangedCallback && dataChangedCallback(saveDataArray)
});
}
}, 2500) - 源代碼 2
const Keys = Object.keys(storageObj);
const StorageKeys = Keys.map(key => newKey(Tag, key));
// 初始化時，将AsyncStorage中的資料一次性讀取到記憶體中
AsyncStorage.multiGet(StorageKeys).then(keyValuePairs => {
keyValuePairs.map(([keyStr, value]) => {
let [, key] = keyStr.split(splitTag);
if (persistTag !== key && !isEmpty(value)) {
storageObj[key] = convertData(value)
}
});
setTimeout(() => initializedCallback(), 100)
}).catch(error => {
console.log(error)
}) 哦，原來 XStorage 通過getter、setter生成器，将使用者自定義的 RNStorage 的各屬與 AsyncStorage 的資料表各字段的值進行了關聯形成了一個綁定關系，在當使用者對 RNStorage 的各屬性進行指派、取值操作的時候，實際上會觸發getter、setter生成器，相應的會對 AsyncStorage 中的資料表進行讀寫操作。
效率與性能的平衡
- <讀> 在初始化XStorage的時候就将AsyncStorage中的所有字段一次性讀取到 RNStorage 對象中，以後續讀取屬性時，并不需要經過AsyncStorage，而是直接傳回 RNStorage的屬性。
- <寫> 在開發者修改XStorage的屬性值時，會先将目标資料指派給XStorage的屬性，然後再異步通過AsyncStorage将目标資料寫入到資料庫中（考慮到資料寫入的效率與性能問題，目前的處理方式為：每次數值的變更都會記錄下來，定時程式每隔2.5秒進行一次資料批量寫入操作），但這個絲毫不會影響App對資料的操作，因為RNStorage中的資料是實時且同步的。
至此就完全清楚了，是不是很簡單？開發者通過 react-native-easy-app 隻需定義一個全局可導出的 RNStorage對象（命名随意，并定義好App所需的各屬性字段），然後在App啟動的時候通過XStorage初始化一次RNStorage即可，以後直接通路RNStorage中的屬性值就行了（所有對RNStorage屬性的修改都會被自動同步到AsyncStorage中），完全是一勞永逸啊。。。
react-native-easy-app 詳解與使用之（二） fetch
想進一步了解，請移步至
npm或github檢視
，有源碼及使用
示例，待大家一探究竟，歡迎朋友們 Star！