React Native - Listview 下拉刷新多次触发答案

【问题标题】：React Native - Listview pull down to refresh fires multiple timesReact Native - Listview 下拉刷新多次触发
【发布时间】：2016-07-16 12:51:32
【问题描述】：

我正在尝试使用 ListView 的 onScroll 函数来检查用户何时将列表拉下超过某个像素值以触发 AJAX 调用并刷新列表。但是，它会触发多次，从而导致活动指示器的动画不流畅。

似乎是因为在下拉和释放过程中频繁检查e.nativeEvent.contentOffset.y < -50。有没有更好的方法在 ListView 中进行下拉刷新或更好地处理微调器？谢谢

  _handleScrollView(e) {
    if (e.nativeEvent.contentOffset.y < -50 && !this.props.listingsLoading) {
      // sets listsLoading to false when complete
      this.props.fetchListings()
    }
  }

  _renderLoadingView() {
    if (this.props.listingsLoading) {
      return (
         <ActivityIndicatorIOS />
      );
    }
  }

  render() {
    var listings = this.state.dataSource

    return (
      <View>
        {this._renderLoadingView()}
        <ListView
          onScroll={this._handleScrollView}
          dataSource={listings}
          renderRow={this._renderRow} />
      </View>
    )
  }

编辑：我添加了以下内容以使用 RefreshControl 使其工作，谢谢大卫！

            <ListView
              refreshControl={
                <RefreshControl
                  refreshing={this.state.isRefreshing}
                  onRefresh={this._onRefresh}
                  tintColor="#ff0000"
                  colors={['#ff0000', '#00ff00', '#0000ff']}
                  progressBackgroundColor="#ffff00"
                />
              }
              dataSource={listings}
              renderRow={this._renderRow}/>

然后定义了一个onRefresh函数：

  _onRefresh() {
    this.setState({isRefreshing: true});
    this.props.fetchListings(this.props.nextPage)
    setTimeout(() => {
      this.setState({
        isRefreshing: false
      });
    }, 3000);
  }

【问题讨论】：

标签： javascript ajax listview react-native

【解决方案1】：

您应该使用内置的Refresh Control 来实现拉取刷新功能。

【讨论】：

感谢您的建议，Refresh Control 仅适用于 ScrollView 还是也适用于 ListView？
刚刚测试过，效果很好。非常感谢！希望他们将其包含在文档中 ListView 的描述中