您好,欢迎来到化拓教育网。
搜索
您的当前位置:首页react-native:下拉刷新组件:react-native

react-native:下拉刷新组件:react-native

来源:化拓教育网

1:react-native-pull介绍

下拉刷新组件,我之前网上查过很多,要么跟复杂,要么只是用iOS ,最后还是这个用这方便;因为我是搞android开发的;所以我下面讲我自己用过的适合Android和ios开发下拉刷新控件;

react-native-pull:他封装了scrollView 和ListView,所以他可以使用ListView里面的所有的方法;他分别有三种状态:

(1):pulling:正在下拉的状态.

(2):Pullok:已经拉倒位置,可以放手的状态。

(3):pullrelease: 放手加载的状态,

2:使用

(1):在自己的工程中执行 npm  install  react-native-pull --save

3:上代码

当然肯定先导入控件:import  {PullList}   from 'react-native-pull';

再看他render方法里面的内容:

                  

解释一下里面的属性:

(1):onPullRelease:在pullrelease状态时候调用的方法

                     onPullRelease(resolve) {

                             setTimeout(() => {

                                         resolve();

                              }, 3000);

                        }

(2):topIndicatorRender:顶部刷新时候执行的方法(里面三个参数代表三种不同的状态)

(3):renderHeader:渲染头部的方法:

                   renderHeader() {   

                                return (

                                        <View  style={styles.title}>

                                       <Text style={{fontWeight:'bold'}}>上拉刷新控件<Text>

                                     </View>

                                );

                        }

(4):renderRow:每行显示的数据:

(5):onEndReached:到达底部出发的监听:

(6)renderFooter:判断是否加载结束,刷新状态提示的隐藏和显示:

3.最后附上源代码的连接

大家可以参考解释,写出来,不懂的可以留言,最后给你们网上的完整例子给你们,对于新手入门很好

Copyright © 2019- huatuo9.cn 版权所有 赣ICP备2023008801号-1

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务