是一款為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的尺寸，實作自動多屏适配可能有人覺得，不同的App有不同的風格UI也完全不一樣，除非是特定需求的UI，基礎功能的UI直接寫就行了，還需要封裝麼？
一千個人心中，有一千個哈姆雷特，也許我的封裝思路能給你帶來不一樣的啟發也未可知呢？
簡單UI（XView，XText，XImage）
1、事件支援
View，Text，Image作為使用頻率最高的三個元件，并不支援我們最常使用的onPress事件，我們要使用onPress事件時，得使用TouchableXXX系列元件來包裹指定的點選區域。
XXXX使用得這三個基本元件支援onPress事件，實作原理很簡單，若傳入的屬性中包含onPress方法，則傳回一個由Touchable系列元件（預設為：TouchableOpacity）包裹的元件，否則傳回原元件。其它用法跟原生元件一緻，所有原生屬性都支援：
XWidget.initResource('https://react-native-easy-app.oss-cn-beijing.aliyuncs.com/images/');
return (
<View style={styles.parent}>
<XImage style={styles.imageStyle} onPress={() => console.log('點選了圖檔')} icon='img_click.png' iconSize={20}/>
<XImage style={styles.imageStyle} onPress={() => console.log('點選了View')} icon='img_click.png'/>
<XView style={styles.imageStyle} onPress={() => console.log('點選了文本')}/>
<XText style={styles.textStyle} onPress={() => console.log('點選了文本')} text='測試點選事件'/>
</View>
) 
- 如上XView、XImage、XText都支援了點選事件【并處理了快速重複點選問題】
- 若設定了資源資源的baseUrl，圖檔的icon由隻需要設定圖檔【名稱】即可
- 當然icon支援多種類型：url、require('./name.jpg')，base64碼等方式
- XImage也支援通過iconSize對内部圖檔設定獨立的尺寸
2、XText支援圖示設定
很多情況下UI的展示是一個文本一個圖示的組合，是以我們的做法基本上都是通過一個View去包裹Image與Text，這樣使用得UI布局結構變得相對複雜，這時候就可以使用XText了
<XText style={styles.textStyle} text='圖示在上' icon='text_img_top.png' iconPosition='top' iconSize={30} iconMargin={3}/>
<XText style={styles.textStyle} text='圖示在右' icon='text_img_right.png' iconPosition='right' iconSize={30} iconMargin={3}/>
<XText style={styles.textStyle} text='圖示在下' icon='text_img_down.png' iconPosition='bottom' iconSize={30} iconMargin={3}/>
<XText style={styles.textStyle} text='圖示在左' icon='text_img_left.png' iconPosition='left' iconSize={30} iconMargin={3}/> 
或許，從止面的代碼和展示出的UI看不出有什麼友善之處，下面我舉幾個例子：
<XText style={styles.text} onPress={() => console.log('點選事件')} text='無圖示文本'/>
<XText style={styles.rnTextItem} text='訂單清單' icon='right_arrow.png' iconSize={16} iconPosition='right' textExtend={true} onPress={() => console.log('點選跳轉')}/>
<XText style={styles.rnSearch} text='請輸入搜尋條件...' icon='icon_search.png' iconSize={16} iconPosition='left' iconMargin={6} onPress={() => console.log('點選跳轉去搜尋')}/>
<XView style={{flexDirection: 'row', alignItems: 'center', margin: 20,}}>
<XText icon='icon_home.png' text='首頁' iconPosition='top' iconSize={20} style={styles.tabText} iconMargin={3} onPress={() => console.log('點選切換Tab')}/>
<XText icon='icon_mine.png' text='我的' iconPosition='top' iconSize={20} style={styles.tabText} iconMargin={3} onPress={() => console.log('點選切換Tab')}/>
<XText icon='icon_favorite.png' text='收藏夾' iconPosition='top' iconSize={24} style={[styles.tabText, {fontSize: 13}]} iconMargin={3} onPress={() => console.log('點選檢視收藏夾')}/>
<XText icon='arrow_left.png' text='傳回' iconPosition='left' iconSize={20} style={[styles.tabText, {fontSize: 15}]} onPress={() => console.log('傳回上一頁')}/>
<XText icon='icon_close.png' text='關閉' iconPosition='right' iconSize={20} style={[styles.tabText, {fontSize: 15}]} onPress={() => console.log('關閉當關頁面')}/>
</XView>
<XText icon='icon_logo.png' text='我的世界' iconPosition='top' iconSize={90} style={{color: Colors.text_light, fontSize: 15,}} iconMargin={3} onPress={() => console.log('點選顯示應用資訊')}/> - 如果從UI很難看出上面的這些各種類型的UI元素竟然是同一個控件XText實作的，但事實卻是如此。
- 當然，這種包裹嵌套方式自然會引出另一個問題，當給這些UI設定屬性時，屬性是被傳給外層的View還内層的Text呢？不用擔心内層包裝已經做了處理，将傳入的屬性和樣式做了拆分，屬于Text的屬性和樣式會傳給Text，剩下的再傳給外層的View
複雜UI（XFlatList）
1、下拉重新整理與分頁支援
下拉重新整理，滾動到底部加載更多資料是很常見的應用場景，但原生的Flatlist并不支援，故對原生Flatlist進行了一下簡單封裝，并支援以下狀态：
static RefreshStatus = {
Idle: {},//idle status
RefreshingData: {text: 'loading…'}, // 加載中(下拉重新整理)...
NoData: {text: 'load complete'}, // 無資料(下拉重新整理)
LoadFailure: {text: 'failed to load'}, // 加載失敗（下拉重新整理）
LoadingMoreData: {moreText: 'loading…'}, // 加載中(加載更多)
NoMoreData: {moreText: 'All data has been loaded'}, // 無資料（加載更多）
LoadMoreFailure: {moreText: 'Click reload'}, // 加載失敗（加載更多）
NetException: {text: 'network exception', moreText: 'Network exception, click reload'}, // 網絡異常
} - 各狀态文本描述可以自由訂制
- XFlatlist的用法與原生Flatlist幾乎一樣，原生屬性也都支援：
<XFlatList data={dataList}
onRefresh={() => this.queryDataList(true)}
onLoadMore={() => this.queryDataList(false)}
refreshStatus={{RefreshingData: {text: '重新整理中，請稍候...'},}}
ListHeaderComponent={() => <XText style={styles.header} text={headerText}/>}
ref={refreshList => this.refreshList = refreshList}
renderItem={({item, index}) => this.renderItem(item, index)}/> - 怎樣發發送請求與設定資料，保證清單的重新整理、加載更多等功能正常的展示呢？主要掌握兩個方法的使用即可：
-
refreshPreLoad = (isPullDown) => {};
在http請求發送【前】調用XFlatlist的 refreshPreLoad 方法并傳入是否是下拉重新整理
-
refreshLoaded = (success, isPullDown, noMoreData, networkException) => {}
在http請求發送傳回【後】調用XFlatlist的 refreshLoaded 方法：
- success =>請求成功與失敗
- isPullDown =>目前操作是下拉還是加載更多
- noMoreData =>是否已經沒有更多資料
- networkException =>是否網絡異常
-
我們看看示例分頁清單的完整實作：
queryDataList = (isPullDown) => {
let {dataList} = this.state;
this.pageIndex = isPullDown ? 1 : this.pageIndex + 1;
this.refreshList && this.refreshList.refreshPreLoad(isPullDown);
let params = {page: isPullDown ? 1 : this.pageIndex};
XHttp().url(Api.queryAnimations).param(params).get((success, {results, last_page}, msg, code) => {
this.refreshList && this.refreshList.refreshLoaded(success, isPullDown, params.page >= last_page, netWorkException(code));
if (success) {
this.setState({dataList: isPullDown ? results : [...dataList, ...results]});
} else {
showToast(msg);
}
});
}; 發現是不是很簡單？通過XFlatlist 20幾行代碼就能完整的實作一個支援下拉重新整理，分頁加載等各種狀态功能的清單。
react-native-easy-app 詳解與使用之（四）螢幕适配
想進一步了解，請移步至
npm或github檢視
，有源碼及使用
示例，待大家一探究竟，歡迎朋友們 Star！