react-native-refresh-list-view 基于FlatList的refresh列表

import RefreshListView, { RefreshState } from "react-native-refresh-list-view";

render部分

  renderCell = item => {
    return (
      
        
      
    );
  };

  renderSeparator = () => {
    return (
      
        
      
    );
  };

  renderHeader = () => {
    return ;
  };

  render() {
    const { sourceData, refreshState } = this.state;
    return (
      
         this.renderSeparator()}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item }) => this.renderCell(item)}
          ListHeaderComponent={this.renderHeader}
          onHeaderRefresh={this.onHeaderRefresh}
          onFooterRefresh={this.onFooterRefresh}
        />
      
    );
  }

onRefresh部分

  static defaultProps = {
    data: []
  };

  constructor(props) {
    super(props);

    this.state = {
      sourceData: [],
      refreshState: RefreshState.Idle
    };
  }

  componentDidMount = () => {
    const { data } = this.props;
    this.setState({
      sourceData: data
    });
  };

  onHeaderRefresh = () => {
    this.setState({
      refreshState: RefreshState.HeaderRefreshing
    });

    const timer = setTimeout(() => {
      this.setState({
        refreshState: RefreshState.Idle
      });

      clearTimeout(timer);
    }, 1500);
  };

  onFooterRefresh = () => {
    this.setState({
      refreshState: RefreshState.FooterRefreshing
    });

    const timer = setTimeout(() => {
      this.setState({
        refreshState: RefreshState.Idle
      });
      clearTimeout(timer);
    }, 1500);
  };

setTimeout定时器使用

注意及时清除定时器clearTimeout(timer);

    const timer = setTimeout(() => {
      this.setState({
        refreshState: RefreshState.Idle
      });

      clearTimeout(timer);
    }, 1500);