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

作者: 春林Zero | 来源:发表于2016-10-15 11:30 被阅读4226次

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.最后附上源代码的连接

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

react-native-pull

相关文章

网友评论

  • Valley4Z:很卡 有没有觉得
  • Setoge:你好,现在这种方式无法操作内部的ListView,比如我现在需求: 列表右侧有一个SectionList,就像通讯录右侧那个索引,点击相应的索引,让listView 滚动到指定的组,好像无法实现了
    1f448c3e9823:您好 我现在正在做这块 下拉刷新网络数据 上拉加载更多网络数据 有没有类似的demo可以看一下啊
    462099683a4b:@Setoge 求滚动到指定组的方法,谢谢!
  • harvey_hui:正学这个,

本文标题:react-native:下拉刷新组件:react-native

本文链接:https://www.haomeiwen.com/subject/bcjvyttx.html