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

Question

我试图在平面列表上实现scrollToIndex函数,以便在呈现时滚动到特定项.我遇到的问题是flatlist呈现的项目有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

包装 Flatlist 中呈现的每个组件View可以调用名为 onLayout 的回调，该回调提供有关该组件的信息。您可以在父组件的上下文中管理一个数组，该数组不会使用每个组件的唯一 id 进行卸载（对我来说，使用 relayjs 的唯一中继 id 很容易。 onLayout 您可以添加其尺寸和引用 id，以便在计算时当列表中的组件卸载时，您可以将其从该数组中删除。