精华内容
下载资源
问答
  • react-native-flatlist-pull是一个基于FlatList,支持Android和iOS的下拉刷新列表组件。是在另一个项目react-native-pull的基础上进行修改而成。主要将原项目中已经过时的ListView替换成较新的FlatList,同时去掉了原...

    完成拉下拉刷新的功能后,老板要求下拉刷新要能自定义。于是到网上找了找,发现了react-native-pull这个开源库。但是这个库本身已经很久没更新,里面使用的还是被淘汰的listView,于是我到源码看了看,把列表替换成了flatList,顺便修复了几个bug。

    github地址:react-native-flatlist-pull

    react-native-flatlist-pull是一个基于FlatList,支持Android和iOS的下拉刷新列表组件。是在另一个项目react-native-pull的基础上进行修改而成。主要将原项目中已经过时的ListView替换成较新的FlatList,同时去掉了原项目中存在BUG的PullView。

    PullList 使用

    1. 使用npm:npm install react-native-flatlist-pull@latest --save
      使用yarn:yarn add react-native-flatlist-pull
    2. 编写代码:
      import {PullList} from 'react-native-pull';
    
      onPullRelease(resolve) {
        //do something
        setTimeout(() => {
              resolve();
          }, 3000);
      }
      
      <PullList
        onPullRelease={this.onPullRelease}
        // topIndicatorRender={this.topIndicatorRender}
        topIndicatorHeight={60}
        isRefreshing={this.state.isRefreshing}
        
        {...and some FlatList Props}
      />
    
    1. 完整示例代码:example

    更多配置项

    PullList 下拉效果属性

    • style: 设置组件样式,比如可以设置width/height/backgroudColor等
    • onPulling: 处于pulling状态时执行的方法
    • onPullOk: 处于onPullOk状态时执行的方法
    • onPullRelease: 处于pullrelease状态时执行的方法
    • topIndicatorRender: 顶部刷新指示组件的渲染方法, 接受4个参数: ispulling, ispullok, ispullreleasegesturePosition,你可以使用gesturePosition定义动画头部.
    • topIndicatorHeight: 顶部刷新指示组件的高度, 若定义了topIndicatorRender则同时需要此属性
    • isPullEnd: 是否已经下拉结束,若为true则隐藏顶部刷新指示组件,非必须
    • isRefreshing: 标示下拉刷新状态的属性,同react-native官网FlatList中的属性refreshing作用类似。为true显示头部刷新指示器,为false则隐藏头部刷新指示器

    PullList 上拉加载更多,可直接使用官网FlatList的属性onEndReachedonEndReachedThreshold进行实现,详情请见Example

    完整demo代码示例:

    import React, { Component } from 'react';
    import {
    Text,
    View,
    ActivityIndicator,
    } from 'react-native';
    
    import {PullList} from 'react-native-flatlist-pull';
    
    export default class extends Component {
    
       constructor(props) {
         super(props);
         this.state = {
           data: [0],
           isRefreshing:false,
           isLoadMore:false
         };
         this.loadMore = this.loadMore.bind(this);
         this.topIndicatorRender = this.topIndicatorRender.bind(this);
         this.onPullRelease=this.onPullRelease.bind(this);
       }
      
       componentDidMount() {
         this.requestData(10);
       }
      
       //自定义下拉刷新指示器
       topIndicatorRender(pulling, pullok, pullrelease) {
         const hide = {position: 'absolute', left: 10000};
         const show = {position: 'relative', left: 0};
         setTimeout(() => {
           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});
           }
         }, 1);
         return (
           <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', height: 60,zIndex:1}}>
             <ActivityIndicator size="small" color="red" />
             <View ref={(c) => {this.txtPulling = c;}}>
               <Text>继续下拉刷新...</Text>
             </View>
             <View ref={(c) => {this.txtPullok = c;}}>
               <Text>松开刷新......</Text>
             </View>
             <View ref={(c) => {this.txtPullrelease = c;}}>
               <Text>刷新中......</Text>
             </View>
           </View>
         );
       }
      
       render() {
         return (
           <PullList
             //FlatList基本属性
             data={this.state.data}
             renderItem={({item,index})=>this.renderItem(item,index)}
             keyExtractor={(item, index) => item.toString()}
      
             //FlatList上拉加载更多
             ListFooterComponent={()=>this.ListFooterComponent()}
             onEndReached={()=>this.loadMore()}
             onEndReachedThreshold={0.1}
      
             //PullList下拉刷新
             onPullRelease={this.onPullRelease}
             topIndicatorRender={this.topIndicatorRender}
             topIndicatorHeight={60}
             //控制下拉刷新状态的属性,为true时显示头部刷新组件,为false则隐藏
             isRefreshing={this.state.isRefreshing}
           />
         );
       }
      
       onPullRelease(resolve) {
         this.setState({isRefreshing:true});
         //do something
         setTimeout(() => {
           //真实情况下,应在请求网络数据后的回调中修改isRefreshing
           this.setState({isRefreshing:false})
         }, 2000);
       }
      
       renderItem(item,index) {
         return (
           <View style={{height: 100, backgroundColor: 'white', alignItems: 'center', justifyContent: 'center'}}>
             <Text style={{fontSize:30}}>{item}</Text>
           </View>
         );
       }
      
       ListFooterComponent=()=>{
         const {isLoadMore}=this.state;
         if(isLoadMore) {
           return (
             <View style={{ height: px2dp(80), alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }}>
               <ActivityIndicator size="small" color="red"/>
               <Text style={{ fontSize: 25, marginLeft: 5 }}>{'正在加载中……'}</Text>
             </View>
           )
         }else return <View/>
       };
      
       loadMore=()=>{
         if(!this.state.isLoadMore) {
           this.setState({ isLoadMore: true });
           //do something
           //真实情况下,应在请求网络数据后的回调中修改isLoadMore
           setTimeout(() => {
             this.requestData(3);
             this.setState({ isLoadMore: false })
           }, 3000);
         }
       };
      
       requestData=(dataLength)=>{
         let currentLength=this.state.data.length;
         for(let i=currentLength;i<currentLength+dataLength;i++) {
           this.state.data.push(i)
         }
       }
    }
    
    展开全文
  • React-Native学习指南 本指南汇集React-Native各类学习资源,给大家提供便利。指南正在不断的更新,大家有好的资源欢迎Pull Requests! 同时还有Awesome React Native系列 ...
  • 有一个很好的下拉刷新、上拉加载库:react-native-pull http://www.jianshu.com/p/c55e53acad85 地址:https://github.com/greatbsky/react-native-pull-demo 下载 npm install react-native-pullview --save ...

    有一个很好的下拉刷新、上拉加载库:react-native-pull   http://www.jianshu.com/p/c55e53acad85
    地址:https://github.com/greatbsky/react-native-pull-demo

    下载

    npm install react-native-pullview --save

    使用

    import {PullList} from 'react-native-pull';//PullList相当于ListView

    源码地址:https://github.com/greatbsky/react-native-pull-demo/blob/master/PullListDemo/app.js

    import {PullView} from 'react-native-pull';//PullView相当于ScrollView

    源码地址:https://github.com/greatbsky/react-native-pull-demo/blob/master/PullViewDemo/app.js

    下载好库直接复制上面网址里面的代码就可以看到效果,使用简单

    PullList使用

    8DCB05BD-83CD-4D77-8BB4-AD1626C2876D.png

    在对应的方法里进行相应的操作即可

    自定义顶部的方法


    2CF30377-991B-40CD-BF02-C8627F5189FA.png

    在下拉到完成时,上面的方法是不停地调用的
    有三个参数
    下拉:pulling=true,pullok=false,pullrelease=false
    到达临界点:pulling=false,pullok=true,pullrelease=false
    释放:pulling=false,pullok=false,pullrelease=true

    可以根据这三个参数判断什么时候显示什么样的界面
    上图是官方的例子(说实话,我这种小白就喜欢简单粗暴的,上面的代码表示完全看不懂)

    以下是我自己写的,简单到词穷
    在view里面放一个Text,通过state改变Text的文本,更复杂就自己干吧


    onPullOk(){
            //只要拉倒那个临界点,就会调用该方法
            console.log('onPullOk');
            this.setState({
                loadText:'释放刷新'
            });
    
        }
        onPulling(){
            //下拉时调用
            console.log('onPulling');
    
            this.setState({
               loadText:'下拉刷新',
            });
        }
        onPullRelease(resolve) {
            //松开手指刷新调用
            console.log('onPullRelease');
            this.setState({
                loadText:'正在刷新',
                isRefreshing:false,
                isLoadEnd:false,
    
            });
    
    
            setTimeout(() => {
                // 准备下拉刷新的5条数据
                var data=this.state.dataSource;
    
                let arr= Array.from(new Array(5)).map((item,index)=>{
                    return ('row:'+{index})
    
                }).concat(data);
    
    
                this.setState({
                    isRefreshing: true,
                    dataSource: arr,
                    loadText:'下拉刷新',
                    isLoadEnd:true,
                });
    
    
                //回到原始状态
                resolve();
    
    
            }, 2000);
        }
    PullView使用

    和pullList使用一样的,多的就不写了


    16E18506-807F-4D4C-9F1E-AA3DAB893EC3.png

    上拉加载主要就是这个

                        //React Native中文网注释如下:
                        // 当所有的数据都已经渲染过,并且列表被滚动到距离最底部不足onEndReachedThreshold个像素的距离时调用。
                        // 原生的滚动事件会被作为参数传递。
    
    
    
    
                        // 译注:当第一次渲染时,如果数据不足一屏(比如初始值是空的),这个事件也会被触发,请自行做标记过滤。
    
    
    
    
                        onEndReached={this.loadMore}
                        onEndReachedThreshold={60}

    大概和iOS的差不多,滚动到倒数第几个cell的时候,请求下一页的数据,这里只不多是换成了距离底部多少距离而已

    同时也看了RN上面的 RefreshControl 刷新,也只是做了个小例子,使用更加简单
    (下方title,tintColor 标注错误,tintColor为菊花颜色,都是iOS可用)


    D188CD9D-01E7-4E0E-A30C-EB0CC7C02B28.png

    QQ20170418-150133.gif

    demo:
    看效果可以在 idnex.ios.js里面改变跳转的页面


    9D7C4534-E0FB-4DFE-B1C1-FF4C89C3EC5B.png
    展开全文
  • 有一个很好的下拉刷新、上拉加载库:react-native-pull地址:https://github.com/greatbsky/react-native-pull-demo 使用 import {PullList} from 'react-native-pull';//PullList相当于ListView 下载好库...

    有一个很好的下拉刷新、上拉加载库:react-native-pull
    地址:https://github.com/greatbsky/react-native-pull-demo

     使用

    import {PullList} from 'react-native-pull';//PullList相当于ListView

    下载好库直接复制下面网址里面的代码就可以看到效果,使用简单

    https://github.com/greatbsky/react-native-pull-demo/blob/master/PullViewDemo/app.js
    PullList使用

    在对应的方法里进行相应的操作即可

    自定义顶部的方法、

    在下拉到完成时,上面的方法是不停地调用的
    有三个参数
    下拉:pulling=true,pullok=false,pullrelease=false
    到达临界点:pulling=false,pullok=true,pullrelease=false
    释放:pulling=false,pullok=false,pullrelease=true

     



    作者:精神病患者link常
    链接:http://www.jianshu.com/p/c55e53acad85
    來源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    转载于:https://www.cnblogs.com/haonanZhang/p/7550946.html

    展开全文
  • 本篇文章主要介绍了react-native ListView下拉刷新上拉加载实现,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 笔记-下拉刷新 import React, { Component } from 'react'; import { View, Text, StyleSheet, ScrollView, Dimensions, RefreshControl, StatusBar, ...} from 'react-native' const width = ...

    笔记-下拉刷新

    import React, { Component } from 'react';
    import {
      View,
      Text,
      StyleSheet,
      ScrollView,
      Dimensions,
      RefreshControl,
      StatusBar,
      SafeAreaView,
    } from 'react-native'
    const width = Dimensions.get('window').width;
    
    
    class DemoRefresh extends Component {
      constructor(){
        super();
        this.state = {
          rowDataArr: Array.from( new Array(30)).map( (value, index) => ({
            title: '初始化数据' + index
          })),
          isRefreshing: false,
          loaded: 0,
        }
      }
    
      onRefreshHandle() {
        this.setState({
          isRefreshing: true
        })
        setTimeout(() => {
          let newDataArr = Array.from( new Array(5)).map( (value, index) => ({
            title: '我是下拉数据' + (index + this.state.loaded)
          })).concat( this.state.rowDataArr );
          this.setState({
            rowDataArr: newDataArr,
            isRefreshing: false,
            loaded: this.state.loaded + 5
          })
        }, 2000);
      }
    
      render() {
        const rowArr = this.state.rowDataArr.map((row, index) => (<Row data={row} key={index}></Row>))
        return (
          <>
            <StatusBar barStyle="dark-content"></StatusBar>
            <SafeAreaView>
            
              <ScrollView
                refreshControl = {
                  <RefreshControl 
                    refreshing={ this.state.isRefreshing }
                    onRefresh = {() => this.onRefreshHandle()}
                  />
                }
              >
                {rowArr}
              </ScrollView>
            </SafeAreaView>
          </>
        )
      }
    }
    
    const styles = StyleSheet.create({
    
    })
    
    
    class Row extends Component {
      render() {
        return(
          <View style={{
            width: width,
            height: 40,
            borderBottomColor: 'red',
            borderBottomWidth: 1,
            justifyContent: 'center'
          }}>
            <Text>{this.props.data.title}</Text>
          </View>
        )
      }
    }
    
    export default DemoRefresh;
    

    Ios

    在这里插入图片描述

    android

    在这里插入图片描述
    (完)

    展开全文
  • rn自带的刷新库样式无法自定义,于是自己参考了 ios MJRefres android SmartLayout 并且参考了rn的相关库来实现了 和官方 RefreshControl 相同功能用法的库react-native-smart-refresh 1.首先给大家上一个预览图...
  • 转自GItHub地址:https://github.com/greatbsky/react-native-pullview 这是一个实现下拉刷新的react native组件,可支持android & ios,简单易用! 纯js代码,基于ScrollView封装. 比scrollv...
  • 使用react-native-table-component, 加上FlatList 组件,实现可以下拉刷新,上拉加载的demo import React, { Component } from 'react'; import { Platform, StyleSheet, Text, View, ScrollView, ...
  • react-native中的下拉刷新实现
  • NavigationBar组件我已经在组件内给了zIdexn:1000, 只要在刷新组件外层 添加ScrollView 设置scrollEnabled={false}就可以解决下拉圆圈穿透层级问题,为什么会设置scrollEnabled={false} 呢? 因为刷新组件FlatList有...
  • react-native封装原生下拉刷新组件

    千次阅读 2018-01-22 18:37:39
    之前改进过一个react-native-pull组件解决了iOS上刷新头部出现空白问题,并且将listview改成了flatlist。 github如下: react-native-pullview这是纯js写的Android&&iOS都可以使用。在iOS上面性能还是可以的,但是...
  • React-Native 上拉加载下拉刷新

    千次阅读 2018-06-15 09:59:51
    react-native 上下拉加载的控件效果都不好,找了半天没找到,正打算自已封装的时候,无意中找到了一个比较好的控件,大家看一下: react-native-refresh-list-view 这个是基于flatlist封装的,效果还不错,大家...
  • https://github.com/greatbsky/react-native-pull-demo/blob/master/README.md ...Demo for react-native-pull react-native-pull Project: https://github.com/greatbsky/react-native-pull中文说明:https://g
  • https://www.jianshu.com/p/c55e53acad85
  • React-Native 上拉刷新下拉加载,点击跳转详情代码解析 导入这行依赖 // An highlighted block import RefreshListView, { RefreshState } from &quot;react-native-refresh-list-view&quot;; 设置...
  • * 下拉刷新/上拉加载更多 组件(Scroller) */ import React, {Component} from 'react'; import { StyleSheet, Text, View, ListView, ActivityIndicator, RefreshControl, } f...
  • react-native 自定义封装刷新组件几个月没写博客了,最近一直在写react 和react-native,前几天刚发了一版基于react-native混合开发的App,这几天赶快总结下。写过java的同学,再去学习react和react-native就会比较...
  • react-native-pull GitHub项目地址:https://github.com/greatbsky/react-native-pull PullView&PullList是两个实现下拉刷新的react native组件,可支持android & ...
  • Flatlist是一个高性能的简单列表组件,支持下面常用的功能 完全跨平台 支持水平布局模式 行组件显示或隐藏时可配置回调事件 ...import { View, Text, FlatList } from 'react-native' 基本定义 this.s...
  • 这是一款基于 react-native,使用纯js编写得,同时支持android和ios得下拉刷新和上拉加载更多得控件 详细用法,请查看 https://github.com/remobile/react-native-refresh-infinite-listview 标签:react
  • 在项目(React-native 0.43版本)中使用FlatList onEndReachedThreshold={20} onEndReached={this._handleLoadMore} /> 遇到不能实现上拉加载更多操作的问题 解决方案 需要将onEndReachedThreshold设置...
  • 功能 这是一个支持自定义的下拉刷新组件 这是一个支持自定义的上拉加载更多的组件 这是一个基于FlatList,SectionList组件。...npm i react-native-bsrefresh-list-view npm i 用法 import React, {Component} f...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 180
精华内容 72
关键字:

react-native下拉刷新