react-native-autoflatlist

一个自动上拉下拉提供分页加载的FlatList组件
!基于最新版写的，在低版本下可能某些方法有Bug,如0.44.3的FlatList的ListFooterComponent这个方法有问题。注释掉即可（上拉过程的状态显示就没有了）

• 安装:

      npm install react-native-autoflatlist --save
  

• 使用:

      import AutoFlatList from 'react-native-autoflatlist'
  

   /**
    * 模拟从网络上加载数据
    * @param page
    * @returns {Promise}
    */
   loadData(page) {
       return new Promise((resolve, reject) => {
           setTimeout(() => {
               // reject('发生错误'); //模拟发生错误
               let data = [];
               for (let i = 0; i < 10; i++) {
                   data.push(`页数${page},数据源${i}`)
               }

               //模拟没有更多数据
               //data.splice(5, 3)

               resolve(data)
           }, 1000)
       })
   }

   renderItem(item, index) {
       return <Text style={{fontSize: 28, padding: 40, backgroundColor: 'white', marginTop: 1}}>{item}</Text>
   }

   render() {
       return (
           <AutoFlatList
               style={{flex: 1, marginTop: 64, backgroundColor: '#eee'}}
               netWork={(page) => this.loadData(page)}
               loadMoreEnable={true}
               renderItem={({item, index}) => this.renderItem(item, index)}
           />
       );
   }

示例图

Props

Events