react-native-easy-app 是一款為React Native App快速開發(fā)提供基礎服務的純JS庫(支持 IOS & Android)版述，特別是在從0到1的項目搭建初期，至少可以為開發(fā)者減少30%的工作量寞冯。
react-native-easy-app 主要做了這些工作：
1. 對AsyncStorage進行封裝渴析，開發(fā)者只需幾行代碼即可實現(xiàn)一個持久化數(shù)據(jù)管理器。
2. 對fetch進行封裝吮龄，使得開發(fā)者只需關注當前App的前后臺交互邏輯和協(xié)議俭茧，定義好參數(shù)設置及解析邏輯即可。
3. 重新封裝了RN的View漓帚、Text母债、Image、FlatList 使用得這些控件在適當?shù)臅r候支持事件或支持icon與文本尝抖，能有效減少布局中的嵌套邏輯毡们。
4. 通過設置一個屏幕參考尺寸，重置XView昧辽、XText衙熔、XImage的尺寸，實現(xiàn)自動多屏適配
可能有人覺得搅荞，不同的App有不同的風格UI也完全不一樣红氯，除非是特定需求的UI，基礎功能的UI直接寫就行了咕痛，還需要封裝么痢甘？
一千個人心中，有一千個哈姆雷特茉贡，也許我的封裝思路能給你帶來不一樣的啟發(fā)也未可知呢产阱？
簡單UI（XView，XText块仆，XImage）
1构蹬、事件支持
View王暗，Text，Image作為使用頻率最高的三個組件庄敛，并不支持我們最常使用的onPress事件俗壹，我們要使用onPress事件時，得使用TouchableXXX系列組件來包裹指定的點擊區(qū)域藻烤。
XXXX使用得這三個基本組件支持onPress事件绷雏，實現(xiàn)原理很簡單，若傳入的屬性中包含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對內(nèi)部圖片設置獨立的尺寸
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實現(xiàn)的路翻，但事實卻是如此割捅。
當然，這種包裹嵌套方式自然會引出另一個問題帚桩，當給這些UI設置屬性時，屬性是被傳給外層的View還內(nèi)層的Text呢嘹黔？不用擔心內(nèi)層包裝已經(jīng)做了處理账嚎，將傳入的屬性和樣式做了拆分，屬于Text的屬性和樣式會傳給Text儡蔓，剩下的再傳給外層的View
復雜UI（XFlatList）
1郭蕉、下拉刷新與分頁支持
下拉刷新，滾動到底部加載更多數(shù)據(jù)是很常見的應用場景喂江，但原生的Flatlist并不支持召锈，故對原生Flatlist進行了一下簡單封裝，并支持以下狀態(tài)：
static RefreshStatus = {
Idle: {},//idle status
RefreshingData: {text: 'loading…'}, // 加載中(下拉刷新)...
NoData: {text: 'load complete'}, // 無數(shù)據(jù)(下拉刷新)
LoadFailure: {text: 'failed to load'}, // 加載失敾裱（下拉刷新）
LoadingMoreData: {moreText: 'loading…'}, // 加載中(加載更多)
NoMoreData: {moreText: 'All data has been loaded'}, // 無數(shù)據(jù)（加載更多）
LoadMoreFailure: {moreText: 'Click reload'}, // 加載失斦撬辍（加載更多）
NetException: {text: 'network exception', moreText: 'Network exception, click reload'}, // 網(wǎng)絡異常
}
- 各狀態(tài)文本描述可以自由訂制
- 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)}/>
- 怎樣發(fā)發(fā)送請求與設置數(shù)據(jù)梢薪，保證列表的刷新蹬铺、加載更多等功能正常的展示呢？主要掌握兩個方法的使用即可：
- refreshPreLoad = (isPullDown) => {};
在http請求發(fā)送【前】調(diào)用XFlatlist的 refreshPreLoad 方法并傳入是否是下拉刷新 - refreshLoaded = (success, isPullDown, noMoreData, networkException) => {}
在http請求發(fā)送返回【后】調(diào)用XFlatlist的 refreshLoaded 方法：- success =>請求成功與失敗
- isPullDown =>當前操作是下拉還是加載更多
- noMoreData =>是否已經(jīng)沒有更多數(shù)據(jù)
- networkException =>是否網(wǎng)絡異常
- refreshPreLoad = (isPullDown) => {};
我們看看示例分頁列表的完整實現(xiàn)：
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);
}
});
};
發(fā)現(xiàn)是不是很簡單秉撇？通過XFlatlist 20幾行代碼就能完整的實現(xiàn)一個支持下拉刷新甜攀，分頁加載等各種狀態(tài)功能的列表。
react-native-easy-app 詳解與使用之（四）屏幕適配
想進一步了解琐馆，請移步至 npm 或github查看 react-native-easy-app规阀，有源碼及使用示例，待大家一探究竟瘦麸，歡迎朋友們 Star谁撼！
