react native实现上拉加载下拉刷新
前言
我们在做原生app开发的时候，很多场景都会用到下拉刷新、上拉加载的操作，Android中如PullToRefreshListView，ios中如MJRefresh等都是比较好用，且实现上比较简单的第三方库。他们的实现原理大体相同，都是在列表的基础上新增头部和尾部，然后新增手势触摸的逻辑判断。那么对于react native，我们也可以用相同的原理来实现。
react-native-pull
这里我们首先要介绍一款兼容Android和ios的组件：react-native-pull 我们首先来看一下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,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});上面的代码种有几个核心的属性需要说明： onPullRelease：在pullrelease状态时候调用的方法 topIndicatorRender：顶部刷新时候执行的方法（里面三个参数代表三种不同的状态）
- pulling：正在下拉的状态
- Pullok:已经拉倒位置，可以放手的状态
- pullrelease: 放手加载的状态
renderHeader：渲染头部的方法，如：
<View style={styles.title}>
<Text style={{fontWeight:'bold'}}>上拉刷新控件<Text>
</View>renderRow：渲染每行显示的数据。 onEndReached：到达底部出发的监听 renderFooter：判断是否加载结束，刷新状态提示的隐藏和显示
PullList 使用
import {PullList} from 'react-native-pull';
onPullRelease(resolve) {
//do something
resolve();
}
<PullList onPullRelease={this.onPullRelease} {
...and some ListView Props
}/>其他属性
style: 设置组件样式，比如可以设width/height/backgroudColor等 topIndicatorRender: 顶部刷新指示组件的渲染方法, 接受三个参数: ispulling, ispullok, ispullrelease topIndicatorHeight: 顶部刷新指示组件的高度, 若定义了topIndicatorRender则同时需要此属性 isPullEnd: 是否已经下拉结束，若为true则隐藏顶部刷新指示组件，非必须 仅PullView支持普通refreshcontrol的相关属性 onRefresh: 开始刷新时调用的方法 refreshing: 指示是否正在刷新
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