当 ListView 嵌套在 ScrollView 中时，onEndReached 一次又一次地触发答案

【问题标题】：onEndReached fire again and again when ListView nested in ScrollView当 ListView 嵌套在 ScrollView 中时，onEndReached 一次又一次地触发
【发布时间】：2017-08-16 15:56:50
【问题描述】：

 render() {
    return (
      <ScrollView style={styles.scroll_style}>
        {this._renderStoreInfo()}
        {this._renderOperatesView()}
        <View style={styles.space}/>
        <ListView
          contentContainerStyle={styles.list}
          dataSource={this.state.dataSource}
          renderRow={(rowData, sectionID, rowID) => this._renderRow(rowData, rowID)}
          renderFooter={this._renderFooter.bind(this)}
          onEndReached={this._onEndReached.bind(this)}
          onEndReachedThreshold={10} />
      </ScrollView>
    );
  }

onEndReached 一安装就一次又一次地触发。但我不滚动（拉起）列表视图。

【问题讨论】：

标签： react-native

【解决方案1】：

目前ScrollView 内部的ListView 存在问题，因为两者都必须共享滚动。

可以将您希望在ListView 上方显示的内容移动到ListView 标头中（renderHeader 方法），并删除ScrollView - 这样可以避免嵌套滚动组件：

getPageHeader() {
  return (
    <View>
      {this._renderStoreInfo()}
      {this._renderOperatesView()}
      <View style={styles.space}/>
    </View>   
  )
}

render() {
  return (
      <ListView
        contentContainerStyle={styles.list}
        dataSource={this.state.dataSource}
        renderHeader={() => this.getPageHeader()}
        renderRow={(rowData, sectionID, rowID) => this._renderRow(rowData, rowID)}
        renderFooter={this._renderFooter.bind(this)}
        onEndReached={this._onEndReached.bind(this)}
        onEndReachedThreshold={10} />
  );
}

这个问题可能会在不久的将来得到解决。

【讨论】：

是的，你是对的，ScrollView 中的 ListView 行为很疯狂

【解决方案2】：

我的个人经历。
只需将 <ScrollView> 替换为 <View> ，然后 onEndReached 函数就可以很好地工作。
当您的数据源数据在当前屏幕上时，ListView 本身将具有滚动条。
本案例不需要使用scrollView。

【讨论】：