Question

我正在尝试使用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);
  }

Answer 1

您应该使用内置Refresh Control来提升刷新功能。

React Native - Listview下拉以多次刷新火灾

1 个答案: