react-native-easy-app是一款爲React Native App快速開發提供基礎服務的純JS庫(支持 IOS & Android)，特別是在從0到1的項目搭建初期，至少能夠爲開發者減小30%的工做量。react
react-native-easy-app主要作了這些工做：
1. 對AsyncStorage進行封裝，開發者只需幾行代碼便可實現一個持久化數據管理器。
2. 對fetch進行封裝，使得開發者只需關注當前App的先後臺交互邏輯和協議，定義好參數設置及解析邏輯便可。
3. 從新封裝了RN的View、Text、Image、FlatList 使用得這些控件在適當的時候支持事件或支持icon與文本，能有效減小布局中的嵌套邏輯。
4. 經過設置一個屏幕參考尺寸，重置XView、XText、XImage的尺寸，實現自動多屏適配git
可能有人以爲，不一樣的App有不一樣的風格UI也徹底不同，除非是特定需求的UI，基礎功能的UI直接寫就好了，還須要封裝麼？github
一千我的心中，有一千個哈姆雷特，也許個人封裝思路能給你帶來不同的啓發也未可知呢？npm
簡單UI（XView，XText，XImage）
一、事件支持
View，Text，Image做爲使用頻率最高的三個組件，並不支持咱們最常使用的onPress事件，咱們要使用onPress事件時，得使用TouchableXXX系列組件來包裹指定的點擊區域。react-native
X系列組件的使用使得這三個基本組件支持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>
)
RFText_RFImage_ui.pngapp
- 如上XView、XImage、XText都支持了點擊事件【並處理了快速重複點擊問題】
- 若設置了資源資源的baseUrl，圖片的icon由只須要設置圖片【名稱】便可
- 固然icon支持多種類型：url、require('./name.jpg')，base64碼等方式
- XImage也支持經過iconSize對內部圖片設置獨立的尺寸
二、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}/>
text_icon_direction.png測試
或許，從止面的代碼和展現出的UI看不出有什麼方便之處，下面我舉幾個例子：fetch
<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('點擊顯示應用信息')}/>
RFText_icon_category.png
-
若是從UI很難看出上面的這些各類類型的UI元素居然是同一個控件XText實現的，但事實倒是如此。
-
固然，這種包裹嵌套方式天然會引出另外一個問題，當給這些UI設置屬性時，屬性是被傳給外層的View還內層的Text呢？不用擔憂內層包裝已經作了處理，將傳入的屬性和樣式作了拆分，屬於Text的屬性和樣式會傳給Text，剩下的再傳給外層的View
複雜UI（XFLatList）
一、下拉刷新與分頁支持
下拉刷新，滾動到底部加載更多數據是很常見的應用場景，但原生的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'}, // 網絡異常
}
- 各狀態文本描述能夠自由訂製
flast_list_all.png
flatlist_pull_loading.png
flatlist_loading_more.png
flatlist_loading_network_exception.png
- 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查看react-native-easy-app，有源碼及使用示例，待你們一探究竟，歡迎朋友們 Star！
若是有任何疑問，歡迎掃碼加入RN技術QQ交流羣