React-Native FlatList 中的 getItemLayout [英] getItemLayout in React-Native FlatList

问题描述

我正在尝试使用 react-native flatlist 的 scrollToIndex 函数.我期望的是字母列表视图.太使用scrollToIndex，我需要设置flatlist组件的getItemLayout prop.我已经用与父平面列表中的项目相同的字母表呈现了项目，并在子平面列表中渲染了项目，因此父平面列表的项目高度是不同的.问题是，如果我给 getItemLayout 道具，它会给我如下错误.

I am trying to use scrollToIndex function of react-native flatlist. What I expect to be is a alphabet list view. Too use scrollToIndex, I need to set getItemLayout prop of the flatlist component. I have rendered items with the same alphabet as an item in the parent flatlist and rendered the items inside the children flatlists, so the item heights of the parent flatlist are varying. The problem is that if I give getItemLayout prop, it gives me error like below.

Invariant Violation:Invariant Violation:Invariant Violation:Invariant Violation:当提供测量指标函数时，不应估计帧

Invariant Violation: Invariant Violation: Invariant Violation: Invariant Violation: Should not have to estimate frames when a measurement metrics function is provided

<FlatList data={this.cityList}
    renderItem={this.renderCityGroup}
    style={styles.cityList}
    keyExtractor={(item, index) => item + index}
    getItemLayout={(data, index) => {
        return {
            length: data.height,
            offset: data.total
        }
    }}
    ref={ref => this.cityListRef = ref}
/>

这是我当前的代码.

推荐答案

就您而言，这很简单.data 里面是你的物品.因此，如果您没有故意修改该数组，使其具有 height 和 total 属性，那么这根本不起作用.

In your case, this is quite simple. Inside of the data are your items. So, if you didn't purposefully modify that array so it has a property height and total, this isn't going to work at all.

另外，offset不是所有元素的总高度，而是所有元素的高度总和在发出元素之前.

Adding to that, offset is not the total height of all elements, but the height of all elements summed up which came before the issued element.

示例:

响应本机请求，它需要索引 3 处的项目，我们的项目的高度为 10、20、30 和 40

React native requests it needs the item at index 3 and our items have a height of 10, 20, 30 and 40

对于第三个元素 offset，您需要添加第零个"、第一个和第二个元素，以便获得起始 y 坐标"(或 x 取决于列表方向是什么).对于 length 只需传递元素的高度，在我们的例子中为 40.

For the third element offset you need to add the "zeroth", the first and the second so you get the "starting y coordinate" (or x depends on what list direction is). For the length just pas the height of your element, which in our case would be 40.

最终返回的对象应该是这样的.

Your final returning object should look something like this.

return {
  index: index,
  /*
    You need to implement the two functions below so they actually return
    what I described above.
  */
  length: getItemHeight(index),
  offset: getItemOffset(index),
}

如果有人在实施方面需要帮助，请发表评论，我可以给你一个提示:)

If someone needs help with an implementaion leave a comment and I can give you a hint :).

不过还有一些陷阱.React 团队要么犯了一个错误，要么认为有时在索引 -1 处请求元素很有趣(或者它可能实际上很有用，我不知道)，至少我没有有.对于这种特殊情况，我在上面发布的代码之前添加了此代码:

There are some more pitfalls though. The react team has either made an error or somehow thinks it's funny (or it may be actually useful I have no idea) to sometimes ask for the element at index -1 which, at least I, do not have. For this special case I prepend this code before the one I posted above:

// New, negative index preventing code
if (index === -1) return { index, length: 0, offset: 0 };
// Old code
return {
  index: index,
  length: getItemHeight(index),
  offset: getItemOffset(index),
}

注意:如果您的项目都具有相同的高度，则整个计算方式更容易.我只是:

NOTE: If your items all have the same height this whole calculation is way easier. I would just be:

return {
  index,
  length: itemHeight, // itemHeight is a placeholder for your amount
  offset: index * itemHeight,
};

这篇关于React-Native FlatList 中的 getItemLayout的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！