React-native-pull 实现下拉刷新

我们在用react-native开发项目时,很多时候都会用到下拉刷新。官网有提供原生的下拉组件<RefreshControl />在ScrollView或FlatList内部添加下拉刷新的功能。
示例:
refreshing (boon):下拉刷新时是否显示指示器
onRefresh (function):开始刷新时调用(SrollView为0时)
colors (Android适用):指定至少一种颜色用来绘制刷新指示器

class RefreshableList extends Component {
constructor(props) {
super(props);
this.state = {
refreshing: false,
};
}

_onRefresh = () => {
this.setState({refreshing: true});
fetchData().then(() => {
this.setState({refreshing: false});
});
}

render() {
return (
<ScrollView
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh}
/>
}
/>
);
}
}

react-native-pull

介绍一款兼容android和ios的组件:react-native-pull
我们首先来看一下react-native-pull的运行效果如何:

第一步安装:npm install react-native-pull --save

第二步引用:import {PullView} from 'react-native-pull'

第三步使用:完整代码如下
(
有几个核心的属性需要说明:
onPullRelease:在pullrelease状态时候调用的方法
topIndicatorRender:顶部刷新时候执行的方法(里面三个参数代表 三种不同的状态)

pulling:正在下拉的状态
Pullok:已经拉倒位置,可以放手的状态
pullrelease: 放手加载的状态
其他属性
style: 设置组件样式,比如可以设width/height/backgroudColor等
topIndicatorRender: 顶部刷新指示组件的渲染方法, 接受三个参数: ispulling, ispullok, ispullrelease
topIndicatorHeight: 顶部刷新指示组件的高度, 若定义了topIndicatorRender则同时需要此属性
isPullEnd: 是否已经下拉结束,若为true则隐藏顶部刷新指示组件,非必须
仅PullView支持普通refreshcontrol的相关属性
onRefresh: 开始刷新时调用的方法
refreshing: 指示是否正在刷新
)

import {PullView} from 'react-native-pull';
import{
ActivityIndicator,
View,
} from 'react-native'
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,
},
});

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复