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交流群