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的尺寸，實現自動多屏適配
可能有人覺得，不同的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 =>是否網絡異常
- refreshPreLoad = (isPullDown) => {};
我們看看示例分頁列表的完整實現：
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查看 react-native-easy-app，有源碼及使用示例，待大家一探究竟，歡迎朋友們 Star！