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

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

render部分

  renderCell = item => {
    return (
      <TouchableOpacity>
        <QuotationCell cellData={item} />
      </TouchableOpacity>
    );
  };

  renderSeparator = () => {
    return (
      <View style={{ backgroundColor: "white" }}>
        <View
          style={{
            height: 0.6,
            backgroundColor: "#E9E9E9",
            marginLeft: "5%",
            marginRight: "5%"
          }}
        />
      </View>
    );
  };

  renderHeader = () => {
    return <QuotationHeader />;
  };

  render() {
    const { sourceData, refreshState } = this.state;
    return (
      <View style={styles.list}>
        <RefreshListView
          data={sourceData}
          refreshState={refreshState}
          ItemSeparatorComponent={() => this.renderSeparator()}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item }) => this.renderCell(item)}
          ListHeaderComponent={this.renderHeader}
          onHeaderRefresh={this.onHeaderRefresh}
          onFooterRefresh={this.onFooterRefresh}
        />
      </View>
    );
  }

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);