Question

我正在尝试在平面列表上实现scrollToIndex函数，以便在呈现时滚动到特定项目。我遇到的问题是，平面列表呈现的项目具有minHeight。问题是，平面列表需要实现一个函数来计算每个元素的偏移量。我想不出一种方法来pre-render平面列表并获得其中每个项目的高度。正如您所看到的，我只是为偏移量添加一个静态数字，这不是我需要的。

<FlatList
  data={data}
  renderItem={this.renderItem}
  getItemLayout={(dat, index) => {
    let offset = 0;
    for (let i = 0; i < index; i++) {
      if (data[i].headerText) {
        offset += 33;
      } else {
        offset += 80;
      }
    }
    return { length: 0, offset, index }
  }
  }
  ref={(ref) => { this.flatListRef = ref; }}
/>

Answer 1

我关注了@Tzvetlin Velev的回答，下面是一个示例：https://snack.expo.io/@drorbiran/scrolltoindex-with-random-item-heights-

我正在计算onLayout中的每个项目高度，在getItemLayout中，我将其上方所有元素的高度相加。

Answer 2

包装Flatlist中呈现的每个组件的View可以调用一个名为onLayout的回调，该回调提供有关该组件的信息。您可以在父组件的上下文中管理一个数组，该组件不会使用每个组件的唯一ID来卸载（对于我来说很容易使用relayjs＆＃39;独特的中继ID＆＃39;。onLayout您可以添加其维度和引用ID因此，当您计算偏移量时，您将拥有这些尺寸。当列表中的某个组件卸载时，您可以从该阵列中删除它。

Answer 3

<FlatList
  data={data}
  renderItem={this.renderItem}
  getItemLayout={(data, index) => {
    let offset = 0;
    for (let i = 0; i < index; i++) {
      if (data[i].headerText) {
        offset += 33;
      } else {
        offset += 80;
      }
    }
    return { length: 0, offset, index }
  }
  }
  ref={(ref) => { this.flatListRef = ref; }}
/>

<FlatList
  data={data}
  renderItem={this.renderItem}
  getItemLayout={(dat, index) => {
    let offset = 0;
    for (let i = 0; i < index; i++) {
      if (data[i].headerText) {
        offset += 33;
      } else {
        offset += 80;
      }
    }
    return { length: 0, offset, index }
  }
  }
  ref={(ref) => { this.flatListRef = ref; }}
/>

具有动态项高度的React-Native Flatlist getItemLayout

3 个答案: