精华内容
下载资源
问答
  • 本篇文章主要介绍了React Native 自定义下拉刷新上拉加载的列表的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • React Native】自定义列表下拉刷新

    千次阅读 2018-07-09 10:32:15
    关于React Native List的下拉刷新,虽然官方出了一个控件RefreshControl,但可定制性太差,基本上样式固定了。为了满足项目需求,我在GitHub上搜到了这个组件,使用起来非常不错。 同时支持android和ios,并且拥有...

            关于React Native List的下拉刷新,虽然官方出了一个控件RefreshControl,但可定制性太差,基本上样式固定了。为了满足项目需求,我在GitHub上搜到了这个组件,使用起来非常不错。

            同时支持android和ios,并且拥有相同的Api,可以自定义下拉刷新样式;它里面已经实现了View,Scrollview,Listview和Flatlist的下拉刷新,可以支持绝大多数的React Native中的组件实现下拉刷新功能。

    安装

            yarn add react-native-rk-pull-to-refresh

    如果link失败就需要手动link

            react-native link react-native-rk-pull-to-refresh

    使用提醒

            它内部包含了PullView、PullScrollView,、PullListView和PullFlatList,如果你想使用PullFlatList的话,那么你要保持你的React Native版本在0.43及以上。并且你要添加如下的代码到FlatList(node_modules/react-native/Libraries/Lists/FlatList.js)中:

    ...
    getScrollMetrics = () => {
        return this._listRef.getScrollMetrics()
    }

    ...

            同时在VirtualizedList(node_modules/react-native/Libraries/Lists/VirtualizedList.js)中添加如下代码:

    ...
     getScrollMetrics = () => {
        return this._scrollMetrics
     }

     ...

    属性

    Porp Type Optional Default Description
    refreshable bool yes true 是否需要下拉刷新功能
    isContentScroll bool yes false 在下拉的时候内容时候要一起跟着滚动
    onPullRelease func yes   刷新的回调
    topIndicatorRender func yes   下拉刷新头部的样式,当它为空的时候就使用默认的
    topIndicatorHeight number yes   下拉刷新头部的高度,当topIndicatorRender不为空的时候要设置正确的topIndicatorHeight
    onPullStateChangeHeight func yes   下拉时候的回调,主要是刷新的状态的下拉的距离
    onPushing func yes   下拉时候的回调,告诉外界此时是否在下拉刷新

            startRefresh():手动调用下拉刷新功能 

            finishRefresh():结束下拉刷新

    使用样例

    PullListView默认样式

    import React, {PureComponent} from 'react';
    import {ListView, View, Text, Dimensions} from 'react-native';
    import {PullListView} from 'react-native-rk-pull-to-refresh'
    const width = Dimensions.get('window').width
    export default class PullListViewDemo extends PureComponent {
        constructor(props) {
            super(props);
            this.dataSource =
                new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}).cloneWithRows(this.getDataSource())
        }

        getDataSource = () => {
            let array = new Array();
            for (let i = 0; i < 50; i++) {
                array.push(`ListViewItem:${i + 1}`);
            }
            return array;
        }

        render() {
            return (
                <PullListView
                    ref={(c) => this.pull = c}
                    isContentScroll={true}
                    style={{flex: 1, width: width}}
                    onPushing={this.props.onPushing}
                    onPullRelease={this._onPullRelease}
                    dataSource={this.dataSource}
                    renderRow={this._renderRow}/>
            )
        }

        _onPullRelease = () => {
            setTimeout(() => {
                this.pull && this.pull.finishRefresh()
            }, 2000)
        }

        _renderRow = (rowData) => {
            return (
                <View style={{width: width, height: 50, justifyContent: 'center', alignItems: 'center'}}>
                    <Text>{rowData}</Text>
                </View>);
        }

        componentDidMount() {
            this.pull && this.pull.startRefresh()
        }

    }

     

    PullView自定义样式

    import React, {PureComponent} from 'react';

    import {View, Text, Dimensions, StyleSheet, ActivityIndicator} from 'react-native';

    import {PullView} from 'react-native-rk-pull-to-refresh'

    const width = Dimensions.get('window').width
    const topIndicatorHeight = 50

    export default class PullViewDemo extends PureComponent {
        render() {
            return (
                <PullView
                    ref={(c) => this.pull = c}
                    style={{flex: 1, width: width}}
                    topIndicatorRender={this.topIndicatorRender}
                    topIndicatorHeight={topIndicatorHeight}
                    onPullStateChangeHeight={this.onPullStateChangeHeight}
                    onPushing={this.props.onPushing}
                    onPullRelease={this._onPullRelease}>
                    <Text style={{flex: 1, width: width, paddingTop: 200, textAlign: 'center'}}>这是内容</Text>
                </PullView>
            )
        }

        onPullStateChangeHeight = (pullState, moveHeight) => {
            if (pullState == 'pulling') {
                this.txtPulling && this.txtPulling.setNativeProps({style: styles.show});
                this.txtPullok && this.txtPullok.setNativeProps({style: styles.hide});
                this.txtPullrelease && this.txtPullrelease.setNativeProps({style: styles.hide});
            } else if (pullState == 'pullok') {
                this.txtPulling && this.txtPulling.setNativeProps({style: styles.hide});
                this.txtPullok && this.txtPullok.setNativeProps({style: styles.show});
                this.txtPullrelease && this.txtPullrelease.setNativeProps({style: styles.hide});
            } else if (pullState == 'pullrelease') {
                this.txtPulling && this.txtPulling.setNativeProps({style: styles.hide});
                this.txtPullok && this.txtPullok.setNativeProps({style: styles.hide});
                this.txtPullrelease && this.txtPullrelease.setNativeProps({style: styles.show});
            }
        }

        topIndicatorRender = () => {
            return (
                <View style={{flexDirection: 'row', justifyContent: 'center', alignItems: 'center', height: topIndicatorHeight}}>
                    <ActivityIndicator size="small" color="gray" style={{marginRight: 5}}/>
                    <Text ref={(c) => this.txtPulling = c} style={styles.hide}>pulling...</Text>
                    <Text ref={(c) => this.txtPullok = c} style={styles.hide}>pullok...</Text>
                    <Text ref={(c) => this.txtPullrelease = c} style={styles.hide}>pullrelease...</Text>
                </View>
            );
        }

        _onPullRelease = () => {
            setTimeout(() => {
                this.pull && this.pull.finishRefresh()
            }, 2000)
        }

        componentDidMount() {
            this.pull && this.pull.startRefresh()
        }
    }

    const styles = StyleSheet.create({
        hide: {
            position: 'absolute',
            left: 10000,
            backgroundColor: 'transparent'
        },
        show: {
            position: 'relative',
            left: 0,
            backgroundColor: 'transparent'
        }

    });

     

    参考链接:https://github.com/hzl123456/react-native-rk-pull-to-refresh

     

     

     

    展开全文
  • 列表作为移动应用中承载主题内容信息的重要组件,React Native早先出道的ListView坑了不少人,今天让我们一起来学习一下,打开React Native列表组件的正确姿势。本场Chat的内容包括: 我们什么时候需要用列表组件 ...

    ListView,FlatList,SectionList...是否傻傻分不清楚?超长列表怎么优化?下拉刷新怎么玩?列表作为移动应用中承载主题内容信息的重要组件,React Native早先出道的ListView坑了不少人,今天让我们一起来学习一下,打开React Native列表组件的正确姿势。本场Chat的内容包括:

    • 我们什么时候需要用列表组件
    • 认识列表组件:ListView, FlatList, SectionList, VirtualizedList
    • 基本用法
    • 常用属性
    • Multi-column
    • 下拉刷新
    • 超长列表的优化
    • 可展开的多级列表
    • 你还可能需要知道的事

    阅读全文: http://gitbook.cn/gitchat/activity/5913324de530257800238ad8

    您还可以下载 CSDN 旗下精品原创内容社区 GitChat App ,阅读更多 GitChat 专享技术内容哦。

    FtooAtPSkEJwnW-9xkCLqSTRpBKX

    展开全文
  • 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中我们一般使用FlatList或SectionList组件实现这些列表视图。通常列表页都会有大量的数据需要加载显示,这时候就用到了分页加载,因此对于列表组件来说,实现...

    在移动端开发中列表页是非常常见的页面,在React Native中我们一般使用FlatList或SectionList组件实现这些列表视图。通常列表页都会有大量的数据需要加载显示,这时候就用到了分页加载,因此对于列表组件来说,实现下拉刷新和上拉加载在很多情况下是必不可少的。

    本篇文章基于FlatList封装一个支持下拉刷新和上拉加载的RefreshListView,对原始的FlatList进行封装之后,再调用上拉和下拉刷新就十分方便了。

    下拉刷新的实现十分简单,这里我们沿用FlatList本身的属性来实现

    onRefresh设置此选项后,则会在列表头部添加一个标准的RefreshControl控件,以便实现“下拉刷新”的功能。同时你需要正确设置refreshing属性。

    refreshing——bool值,用来控制刷新控件的显示与隐藏。刷新完成后设为false。

    通过这两个属性设置我们就可以实现FlatList头部的刷新操作,控件使用默认的样式,Android和iOS沿用各自系统的组件来显示。

    重点在于上拉加载更多,React Native的列表组件中没有这个功能,需要我们自己实现。 对于上拉加载,通常我们有几种状态,这里我创建一个RefreshState.js文件存放上拉加载的状态:

    export default {
      Idle: 'Idle',               // 初始状态,无刷新的情况
      CanLoadMore: 'CanLoadMore', // 可以加载更多,表示列表还有数据可以继续加载
      Refreshing: 'Refreshing',   // 正在刷新中
      NoMoreData: 'NoMoreData',   // 没有更多数据了
      Failure: 'Failure'          // 刷新失败
    }
    复制代码

    然后根据这几种状态来封装一个RefreshFooter组件,使其根据不同状态显示不同内容,废话不多说上代码:

    import React, {Component} from 'react';
    import {View, Text, ActivityIndicator, StyleSheet, TouchableOpacity} from 'react-native';
    import RefreshState from './RefreshState';
    import PropTypes from 'prop-types';
    
    export default class RefreshFooter extends Component {
    
      static propTypes = {
        onLoadMore: PropTypes.func,     // 加载更多数据的方法
        onRetryLoading: PropTypes.func, // 重新加载的方法
      };
      
      static defaultProps = {
        footerRefreshingText: "努力加载中",
        footerLoadMoreText: "上拉加载更多",
        footerFailureText: "点击重新加载",
        footerNoMoreDataText: "已全部加载完毕"
      };
      
      render() {
        let {state} = this.props;
        let footer = null;
        switch (state) {
          case RefreshState.Idle:
            // Idle情况下为null,不显示尾部组件
            break;
          case RefreshState.Refreshing:
            // 显示一个loading视图
            footer =
              <View style={styles.loadingView}>
                <ActivityIndicator size="small"/>
                <Text style={styles.refreshingText}>{this.props.footerRefreshingText}</Text>
              </View>;
            break;
          case RefreshState.CanLoadMore:
            // 显示上拉加载更多的文字
            footer =
              <View style={styles.loadingView}>
                <Text style={styles.footerText}>{this.props.footerLoadMoreText}</Text>
              </View>;
            break;
          case RefreshState.NoMoreData:
            // 显示没有更多数据的文字,内容可以自己修改
            footer =
              <View style={styles.loadingView}>
                <Text style={styles.footerText}>{this.props.footerNoMoreDataText}</Text>
              </View>;
            break;
          case RefreshState.Failure:
            // 加载失败的情况使用TouchableOpacity做一个可点击的组件,外部调用onRetryLoading重新加载数据
            footer =
              <TouchableOpacity style={styles.loadingView} onPress={()=>{
                this.props.onRetryLoading && this.props.onRetryLoading();
              }}>
                <Text style={styles.footerText}>{this.props.footerFailureText}</Text>
              </TouchableOpacity>;
            break;
        }
        return footer;
      }
    }
    
    const styles = StyleSheet.create({
      loadingView: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        padding: 15,
      },
      refreshingText: {
        fontSize: 12,
        color: "#666666",
        paddingLeft: 10,
      },
      footerText: {
        fontSize: 12,
        color: "#666666"
      }
    });
    复制代码

    注意,propTypes是我们给RefreshFooter组件定义的给外部调用的方法,方法类型需要使用PropTypes来指定,需要安装facebook的prop-types依赖库,最好使用yarn add prop-types安装,不容易出错。这里用作运行时的类型检查,可以点击这里详细了解。

    defaultProps中我们定义了几种不同状态下默认的文本内容,可以在外部传值进行修改。

    接下来就要来实现这个RefreshListView了。首先应该明确的是,这个RefreshListView要有头部刷新和尾部刷新的调用方法,具体调用数据的方法应该在外部实现。先跟RefreshFooter一样定义两个方法:

    static propTypes = {
      onHeaderRefresh: PropTypes.func, // 下拉刷新的方法,供外部调用
      onFooterRefresh: PropTypes.func, // 上拉加载的方法,供外部调用
    };
    复制代码

    上面说到头部的下拉刷新使用FlatList自带特性实现,我们需要定义一个bool值isHeaderRefreshing来作为refreshing属性的值,控制头部显示与否。同时定义一个isFooterRefreshing来判断尾部组件的刷新状态。定义footerState用来设定当前尾部组件的state,作为RefreshFooter的值。

    constructor(props) {
        super(props);
        this.state = {
          isHeaderRefreshing: false,  // 头部是否正在刷新
          isFooterRefreshing: false,  // 尾部是否正在刷新
          footerState: RefreshState.Idle, // 尾部当前的状态,默认为Idle,不显示控件
        }
      }
    复制代码

    render函数如下:

    render() {
        return (
          <FlatList
            {...this.props}
            onRefresh={()=>{ this.beginHeaderRefresh() }}
            refreshing={this.state.isHeaderRefreshing}
            onEndReached={() => { this.beginFooterRefresh() }}
            onEndReachedThreshold={0.1}  // 这里取值0.1(0~1之间不包括0和1),可以根据实际情况调整,取值尽量小
            ListFooterComponent={this._renderFooter}
          />
        )
      }
      
      _renderFooter = () => {
        return (
          <RefreshFooter
            state={this.state.footerState}
            onRetryLoading={()=>{
              this.beginFooterRefresh()
            }}
          />
        )
      };
    复制代码

    可以看到上面的代码中有beginHeaderRefresh和beginFooterRefresh两个方法,这两个方法就是用来调用刷新的,但是在刷新之前还有一些逻辑情况需要判断。比如头部和尾部不能够同时刷新,不然数据处理结果可能受到影响,正在刷新时要防止重复的刷新操作,这些都是要考虑的。这里我在代码中详细注释了:

    /// 开始下拉刷新
    beginHeaderRefresh() {
      if (this.shouldStartHeaderRefreshing()) {
        this.startHeaderRefreshing();
      }
    }
    
    /// 开始上拉加载更多
    beginFooterRefresh() {
      if (this.shouldStartFooterRefreshing()) {
        this.startFooterRefreshing();
      }
    }
    
    /***
     * 当前是否可以进行下拉刷新
     * @returns {boolean}
     *
     * 如果列表尾部正在执行上拉加载,就返回false
     * 如果列表头部已经在刷新中了,就返回false
     */
    shouldStartHeaderRefreshing() {
      if (this.state.footerState === RefreshState.refreshing ||
        this.state.isHeaderRefreshing ||
        this.state.isFooterRefreshing) {
        return false;
      }
      return true;
    }
    
    /***
     * 当前是否可以进行上拉加载更多
     * @returns {boolean}
     *
     * 如果底部已经在刷新,返回false
     * 如果底部状态是没有更多数据了,返回false
     * 如果头部在刷新,则返回false
     * 如果列表数据为空,则返回false(初始状态下列表是空的,这时候肯定不需要上拉加载更多,而应该执行下拉刷新)
     */
    shouldStartFooterRefreshing() {
      if (this.state.footerState === RefreshState.refreshing ||
        this.state.footerState === RefreshState.NoMoreData ||
        this.props.data.length === 0 ||
        this.state.isHeaderRefreshing ||
        this.state.isFooterRefreshing) {
        return false;
      }
      return true;
    }
    复制代码

    其中startHeaderRefreshing和startFooterRefreshing的逻辑如下:

    /// 下拉刷新,设置完刷新状态后再调用刷新方法,使页面上可以显示出加载中的UI,注意这里setState写法
    startHeaderRefreshing() {
      this.setState(
        {
          isHeaderRefreshing: true
        },
        () => {
          this.props.onHeaderRefresh && this.props.onHeaderRefresh();
        }
      );
    }
    
    /// 上拉加载更多,将底部刷新状态改为正在刷新,然后调用刷新方法,页面上可以显示出加载中的UI,注意这里setState写法
    startFooterRefreshing() {
      this.setState(
        {
          footerState: RefreshState.Refreshing,
          isFooterRefreshing: true
        },
        () => {
          this.props.onFooterRefresh && this.props.onFooterRefresh();
        }
      );
    }
    复制代码

    在刷新之前,我们需要将头部或尾部的组件显示出来,然后再调用外部的数据接口方法。这里setState这样写的好处是state中的值更新完成后才会调用箭头函数中的方法,是有严格顺序的,如果把this.props.onFooterRefresh && this.props.onFooterRefresh()写在setState外部,在UI上我们可能看不到头部的loading或者尾部的努力加载中,接口方法就已经调用完毕了。

    最后,在刷新结束后我们还需要调用停止刷新的方法,使头部或尾部组件不再显示,否则一直是加载中还可能让人以为是bug。下面看看停止刷新的方法:

    /**
     * 根据尾部组件状态来停止刷新
     * @param footerState
     *
     * 如果刷新完成,当前列表数据源是空的,就不显示尾部组件了。
     * 这里这样做是因为通常列表无数据时,我们会显示一个空白页,如果再显示尾部组件如"没有更多数据了"就显得很多余
     */
    endRefreshing(footerState: RefreshState) {
      let footerRefreshState = footerState;
      if (this.props.data.length === 0) {
        footerRefreshState = RefreshState.Idle;
      }
      this.setState({
        footerState: footerRefreshState,
        isHeaderRefreshing: false,
        isFooterRefreshing: false
      })
    }
    复制代码

    这里传入一个尾部组件状态的参数是为了更新尾部组件的样式。同时对数据源data进行一个判断,如果为空说明当前没有数据,可以显示空白页面,那么尾部组件也没必要显示了。

    以下是我使用RefreshListView实现的豆瓣电影页面分页加载的效果图:

    完整的Demo地址:github.com/mrarronz/re…,感谢阅读!

    展开全文
  • React Native 列表的总结

    2018-12-27 17:10:00
    React Native 列表的总结 FlatList和SectionList都是React Native中高性能的列表组件。这些新的列表组件在性能方面都有了极大的提升, 其中最主要的一个是无论列表有多少行,它的内存使用都是常数级的。他们有着共同...
  • 列表文件: 类外侧定义变量,直接可赋值,不需要setState。 let ListData = [] let page = 1 export default class TaskOrderFiller extends Component { componentWillMount() { this.searchDate({ page: ...
  • constructor(props) { super(props); this.dataSource = Array(2).fill( new ListView.DataSource({ /*判断这两行是否相同,就是是否发生变化,决定渲染哪些行组件,避免全部渲染,提高渲染效率*/
  • ListView开始时的数据源: ... 'ROW2' ]然后我改变数据源,刷新没反应。当然如何你删除或者增加一组数据是可以的。 dataArr[0] = "hello,改变了第一行的数据" this.setState({ dataSource: this.state.dataSource
  • ReactNative填坑之列表使用,如何做上拉刷新。 注意点:FlatList,PullList,触发刷新关键点:onEndReachedThreshold,其中FlatList不是以像素为条件, 思路 当FlatList滑动到底部时,页面数加一,触发请求新一页...
  • react native 列表展示的解决方案

    千次阅读 2016-09-23 10:33:53
    react native 列表展示的解决方案explain一开始我坐下拉刷新列表的展示的时候选用的为gift list类的组件,确实美观,功能多,当我发现如何结合redux,就会不方便,且没有很好的例子,最后的解决方案,采用listView...
  • 高性能的分组(section)列表组件,支持下面这些常用的功能: 完全跨平台。 行组件显示或隐藏时可配置回调事件。 支持单独的头部组件。 支持单独的尾部组件。 支持自定义行间分隔线。 支持分组的头部组件。 支持分组...
  • 显示数据列表时离不开数据的刷新和延迟加载,对于用户的体验和APP的性能都有好处,在rn中展示长列表,使用flatList 1、FlatList如何显示数据?给FlatList的data属性指定一个值,通过renderItem循环输出。 <...
  • react native实现上拉加载下拉刷新

    千次阅读 2017-01-16 21:30:07
    前言我们在做原生app开发的时候,很多场景都会用到下拉刷新、上拉加载的操作,Android中如PullToRefreshListView,ios中如MJRefresh等都是比较好用,且实现上比较简单的第三方库。他们的实现原理大体相同,都是在...
  • react native 的上拉加载一直困扰着自己,一直用的第三方组件,但是可维护性不高,而且也不太好用,最近工作没那么忙,就研究下了官方的FlatList,做出来的成果,比第三方组件流畅度高好多,而且也很好用 ...
  • 需求:删除列表中的某一项,但不刷新整个页面,底下的数据顺势而上(第一张是原始数据,第二张是删除掉“你会介今年”这条动态后显示的数据)。 中间的过程比较曲折,只因为刚开始的时候自己只想着实现功能,却没考虑...
  • FlatList中,属性onViewableItemsChanged 是用来在列表滑动的时候回调的, 但是我之前在回调函数中改变状态,导致render重新绘制,flatlist重新刷新会报错, Changing onViewableItemsChanged on the fly is not ...
  • 基于React Native官方组件FlatList,增加可定制化“下拉刷新”、“下拉加载更多”组件API的新列表组件,具体实现功能如下: 自定义下拉刷新组件API 自定义上拉LoadMore组件API Installation npm install react-...
  • 3.5 拖曳刷新列表——RefreshControl组件在3.4节中,我们完善了商品列表的功能:不仅优化了列表的布局,还添加了分割线等效果。不过,该App还缺少一个常用的功能,那就是拖曳刷新。虽然也可以添加一个“刷新”按钮...
  • 简述:ReactNative在0.43.0版本中开始推出SectionList,RN高性能的分组(section)列表组件,支持下面的这些常用功能:完全跨平台。 支持水平布局模式。 行组件显示或隐藏时可配置回调事件。 支持单独的头部组件。 支持...
  • 效果如下: 核心思路就是往数据源里面 给每条数据加一个选中状态. 如图在网络请求完成之后,给每条数据添加一个select的状态: data.list.forEach(item => item.select = false);...this.state.r...
  • FlatList用来显示列表数据,而列表经常要用到下拉刷新功能, 那FlatList怎么做到下拉刷新呢?其实加上两个属性onRefresh、refreshing 就可以实现下拉刷新了,如图: <FlatList data={data} renderItem={...
  • Flatlist是一个高性能的简单列表组件,支持下面常用的功能 完全跨平台 支持水平布局模式 行组件显示或隐藏时可配置回调事件 ...import { View, Text, FlatList } from 'react-native' 基本定义 this.s...
  • 本文作者:李磊背景Web 应用如果要更新列表数据,一般会选择点击左上角刷新按钮,或使用快捷键 Ctrl+F5,进行页面资源和数据的全量更新。如果页面提供了刷新按钮或是翻页按钮,也可以点击只做数据更新。但移动客户端...

空空如也

空空如也

1 2 3 4 5
收藏数 96
精华内容 38
关键字:

nativereact列表刷新