Question

我正在尝试使用react-native平面列表的scrollToIndex函数。我期望是一个字母列表视图。太使用scrollToIndex，我需要设置平面列表组件的getItemLayout属性。我已经渲染了与父级平面列表中的项目具有相同字母的项目，并且渲染了子级平面列表中的项目，因此父级平面列表的项目高度是变化的。问题是，如果我给定getItemLayout属性，则会出现如下错误。

不变违反：不变违反：不变违反：不变违反：提供测量指标功能时不必估算帧

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

这是我当前的代码。

Answer 1

对于您来说，这很简单。 data内部是您的物品。因此，如果您没有故意修改该数组以使其具有属性height和total，那么它将根本无法工作。

此外，offset不是所有元素的总高度，而是所有元素的高度相加在已发布元素之前的。

示例：

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

对于第三个元素offset，您需要添加“第零个”，第一个和第二个，以便获得“起始y坐标”（或x取决于列表方向）。对于length，只需触摸元素的高度，在我们的例子中为40。

您最终返回的对象应该看起来像这样。

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),
}

如果有人在实现方面需要帮助，请发表评论，我可以给您一个提示：）。

虽然还有更多陷阱。 React团队犯了一个错误，或者以某种方式认为是有趣的（或者我实际上不知道这可能实际上有用）有时要求索引-1上的元素（至少我没有）。对于这种特殊情况，我在上面发布的代码之前添加了这段代码：

// 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),
}

注意：如果您的所有商品都具有相同的高度，则整个计算就更容易了。我就是：

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

React-Native FlatList中的getItemLayout

1 个答案: