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

发布时间：2020-12-15 05:07:09 所属栏目：百科来源：网络整理

导读：我试图在平面列表上实现scrollToIndex函数,以便在呈现时滚动到特定项.我遇到的问题是flatlist呈现的项目有minHeight.问题是,平面列表需要实现一个函数来计算每个元素的偏移量.我想不出一种方法来预渲染平面列表并获得其中每个项目的高度.正如您所看到的,我只

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

<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; }}
/>

包装在Flatlist中呈现的每个组件的View可以调用一个名为onLayout的回调,该回调提供有关该组件的信息.您可以在父组件的上下文中管理一个数组,该组件不会使用每个组件的唯一ID进行卸载(对于我来说,使用relayjs的“独特的中继ID”很容易.onLayout您可以添加其维度和引用ID,以便在计算时offset,你有那些尺寸.当列表中的组件卸载时,你可以从该数组中删除它.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!