react-native-bsrefresh-list-view實現拉動刷新

功能

1. 這是一個支持自定義的下拉刷新組件
2. 這是一個支持自定義的上拉加載更多的組件
3. 這是一個基於FlatList，SectionList組件。支持二者的可選配置

效果

gitHub地址: github.com/FreeBaiShun…

npm集成

npm i react-native-bsrefresh-list-view
npm i

用法

import React, {Component} from 'react';
import RequestManager from '../network/RequestManager';
import config from '../network/NetworkConfig';
import RefreshListView, { RefreshState } from 'react-native-bsrefresh-list-view'

import {
    Platform,
    View,
    Text,
    Image,
    Button,
    FlatList,
} from 'react-native'

import Case from './Case'
var pageCur = 1;
var arrMList = [];

export default class Home extends Component {
    _flatList;


   static navigationOptions = ({navigation}) => {
        return {
            headerStyle:{
                backgroundColor: 'red',
            },
            headerTitle: (
                <Text style={{color:'red'}}>
                    首頁
                </Text>
            )
        };
    }

    state = {
        dataFlatList:[],
        refreshState: RefreshState.Idle,
    }

    _renderItem = (item) => {
        var dictCur = item.item;
        var txt =  dictCur.title + '---' + dictCur.content;
        return(
            <View style = {{height: 50.0}}>
                <Text>
                    {txt}
                </Text>
            </View>
        )
    }
    _keyExtractor = (item, index) => {
        return index;
    }
    render() {
        return (
             <View>
                 <RefreshListView
                 //FlatList
                componentName = {'FlatList'}
                data = {this.state.dataFlatList}
                //SectionList
                //componentName = {'SectionList'}
                //sections = {this.state.dataFlatList}

                renderItem = {this._renderItem}
                refreshState={this.state.refreshState}
                onHeaderRefresh={this.onHeaderRefresh}
                onFooterRefresh={this.onFooterRefresh}
                keyExtractor={this._keyExtractor}

                // 可選
                footerRefreshingText='玩命加載中 >.<'
                footerFailureText='我擦嘞，竟然失敗了 =.=!'
                footerNoMoreDataText='-我是有底線的-'
                footerEmptyDataText='-好像什麼東西都沒有-'
                >

               </RefreshListView>
             </View>
            
        )
    }

    componentDidMount() {
       this.onHeaderRefresh();
     }

     //請求數據
     fetchData(page,callback){
        RequestManager.get(config.api.getText,
            {
             page:page,
             count:50,
            },(json,error) => {
                 if(error){
                    if(callback){
                        callback(null,error);
                    }
                 }else{
                     if(page == 1){
                         pageCur = 1;
                         arrMList = [];
                     }
                    arrMList = arrMList.concat(json.result);
                    if(callback){
                        callback(arrMList,null);
                    }
                 }
            });
     }

     onHeaderRefresh = () => {
          this.setState({ refreshState: RefreshState.HeaderRefreshing });
          this.fetchData(1,(arr, error) => {
              if(error){
                this.setState({ refreshState: RefreshState.Failure });
              }else{
                this.setState({
                    dataFlatList: arr,
                    refreshState: arr.length < 1 ? RefreshState.EmptyData : RefreshState.Idle,
                  })
              }
          });
      }
    
      onFooterRefresh = () => {
        pageCur++;
        console.log('pageCur = ' + pageCur);
        this.setState({ refreshState: RefreshState.FooterRefreshing })
        this.fetchData(pageCur,(arr, error) => {
            if(error){
              this.setState({ refreshState: RefreshState.Failure });
            }else{
              this.setState({
                  dataFlatList: arr,
                  refreshState: (arr.length%50 != 0) ? RefreshState.NoMoreData : RefreshState.Idle,
                })
            }
        });
      }
}
複製代碼

該Demo啓動

1. 在react-native路徑下執行

$ npm i
複製代碼

2. 在ios路徑下執行

$ pod install
複製代碼

3. 在node_modules路徑下執行(啓服)

$ npm start
複製代碼

4. 運行 用xcode打開BottomTest.xcworkspace工程文件運行便可