react native实现上拉加载下拉刷新
前言我们在做原生app开发的时候,很多场景都会用到下拉刷新、上拉加载的操作,Android中如PullToRefreshListView,ios中如MJRefresh等都是比较好用,且实现上比较简单的第三方库。他们的实现原理大体相同,都是在列表的基础上新增头部和尾部,然后新增手势触摸的逻辑判断。那么对于react native,我们也可以用相同的原理来实现。 react-native-pull这里我们首先要介绍一款兼容Android和ios的组件:react-native-pull PullView 使用在自己的工程中执行引入,当然也可以自己封装个 npm install react-native-pull --save
和其他的第三方库使用一样,引入包,然后添加标签对: import {PullView} from 'react-native-pull';
onPullRelease(resolve) {
//do something
resolve();
}
<PullView onPullRelease={this.onPullRelease}>
//省略n多逻辑
</PullView>
完整代码如下: import {PullView} from 'react-native-pull';
export default class extends Component {
constructor(props) {
super(props);
this.state = {refreshing: false};
this.onPullRelease = this.onPullRelease.bind(this);
this.topIndicatorRender = this.topIndicatorRender.bind(this);
}
onPullRelease(resolve) {
//do something
setTimeout(() => { resolve(); },3000); } topIndicatorRender(pulling,pullok,pullrelease) { const hide = {position: 'absolute',left: 10000}; const show = {position: 'relative',left: 0}; if (pulling) { this.txtPulling && this.txtPulling.setNativeProps({style: show}); this.txtPullok && this.txtPullok.setNativeProps({style: hide}); this.txtPullrelease && this.txtPullrelease.setNativeProps({style: hide}); } else if (pullok) { this.txtPulling && this.txtPulling.setNativeProps({style: hide}); this.txtPullok && this.txtPullok.setNativeProps({style: show}); this.txtPullrelease && this.txtPullrelease.setNativeProps({style: hide}); } else if (pullrelease) { this.txtPulling && this.txtPulling.setNativeProps({style: hide}); this.txtPullok && this.txtPullok.setNativeProps({style: hide}); this.txtPullrelease && this.txtPullrelease.setNativeProps({style: show}); } return ( <View style={{flexDirection: 'row',justifyContent: 'center',alignItems: 'center',height: 60}}> <ActivityIndicator size="small" color="gray" /> <Text ref={(c) => {this.txtPulling = c;}}>下拉刷新pulling...</Text> <Text ref={(c) => {this.txtPullok = c;}}>松开刷新pullok......</Text> <Text ref={(c) => {this.txtPullrelease = c;}}>玩命刷新中pullrelease......</Text> </View> ); } render() { return ( <View style={[styles.container]}> <PullView style={{width: Dimensions.get('window').width}} onPullRelease={this.onPullRelease} topIndicatorRender={this.topIndicatorRender} topIndicatorHeight={60}> <View style={{backgroundColor: '#eeeeee'}}> //省略列表的数据 </View> </PullView> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,backgroundColor: '#F5FCFF',},welcome: { fontSize: 20,textAlign: 'center',margin: 10,instructions: { textAlign: 'center',color: '#333333',marginBottom: 5,});
上面的代码种有几个核心的属性需要说明:
renderHeader:渲染头部的方法,如: <View style={styles.title}> <Text style={{fontWeight:'bold'}}>上拉刷新控件<Text> </View>
renderRow:渲染每行显示的数据。 PullList 使用import {PullList} from 'react-native-pull';
onPullRelease(resolve) { //do something resolve(); }
<PullList onPullRelease={this.onPullRelease} { ...and some ListView Props }/>
其他属性style: 设置组件样式,比如可以设width/height/backgroudColor等 react-native-pullRefreshScrollView说完react-native-pull,我们再来看一个目前只支持ios的框架react-native-pullRefreshScrollView,该组件可以实现界面的定制(头部,底部View的样式修改,唯一不足的是暂时不支持Android),先看下运行的效果: 使用该组件使用也是相当的简单和方便,来看ListView中如何使用: import PullRefreshScrollView from 'react-native-pullrefresh-scrollview';
render() {
return (
<ListView
renderScrollComponent={(props) => <PullRefreshScrollView onRefresh={(PullRefresh)=>this.onRefresh(PullRefresh)} {...props} />}
dataSource={this.state.dataSource}
renderRow={(rowData) => <Text>{rowData}</Text>}
/>
);
}
Scrollview使用 import PullRefreshScrollView from 'react-native-pullrefresh-scrollview';
render() {
return (
<PullRefreshScrollView ref="PullRefresh" onRefresh={()=>this.onRefresh()}>
<View><Text>Scroll1</Text></View>
</PullRefreshScrollView>
);
}
附上源码链接:https://github.com/xiangzhihong/react-native-pullRefreshScrollView (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |