react-native - FlatList 中的 getItemLayout 在第一次渲染时传递索引 -1

Question

我正在使用 initialScrollIndex 和 getItemLayout 实现一个 FlatList。但是，每次我的应用程序启动时，它都会以某种方式呈现第一个元素，然后跳转到实际的 initialScrollIndex。这意味着我本应获得的实际性能提升并没有发挥作用。

当检查 getItemLayout 函数时，我可以看到当它呈现时传递的第一个索引是 -1 而不是 initialScrollIndex，因此抛出错误和打破。传递其他随机索引，直到传递 initialScrollIndex`。

知道为什么会发生这种情况吗？

平面列表:

renderMonthPerMonth() {
const data = this.deriveMonthPerMonthDataFromProps();
const initialScrollIndex = this.deriveInitialScrollIndex();

return (
  <FlatList
    data={data}
    ref={'flatlist'}
    initialNumToRender={3}
    onLayout={this.onLayout} 
    getItemLayout={this.getItemLayout}
    showsVerticalScrollIndicator={false}
    initialScrollIndex={initialScrollIndex}
    renderItem={this.renderOneMonthPerMonth}
    ListHeaderComponent={this.renderListHeader}
    keyExtractor={el => `${el.monthName}-monthPerMonth`}
    onScrollBeginDrag={() => this.onExpandMenu('scroll')}
    ItemSeparatorComponent={this.renderItemSeparator}
    ListFooterComponent={this.renderFooterComponent}
  />
);
}

获取项目布局:

getItemLayout(data, index) {
const monthAsNumber = moment().month(data[index].monthName).format('M')-1;

const SEPARATOR_HEIGHT = 25;
const MONTH_NAME_CONTAINER_HEIGHT = 55;

const ONE_DAY_HEIGHT = (((width-40)/7)/1.1);
const WEEKS_IN_MONTH = this.weeksInMonth(moment().format('YYYY'), monthAsNumber);

// define oneMonthHeight using weeksInMonth method
const oneMonthHeight = (ONE_DAY_HEIGHT * WEEKS_IN_MONTH) + (MONTH_NAME_CONTAINER_HEIGHT + SEPARATOR_HEIGHT);

return {
  length: oneMonthHeight,
  offset: oneMonthHeight * index,
  index,
}
}

控制台:

Answer 1

我怀疑问题出在 renderItem 属性和随后的 renderOneMonthPerMonth() 方法中。

引用FlatList docs :

This is a PureComponent which means that it will not re-render if props remain shallow-equal. Make sure that everything your renderItem function depends on is passed as a prop (e.g. extraData) that is not === after updates, otherwise your UI may not update on changes. This includes the data prop and parent component state.

和

renderItem({ item: Object, index: number, separators: { highlight: Function, unhighlight: Function, updateProps: Function(select: string, newProps: Object) } }) => ?React.Element

拥有 this.deriveMonthPerMonthDataFromProps() 可能不是 Pure(取决于那个 Prop ，我看不到它)。

1. 尝试获取所有数据并分配给传递的 renderItem 方法之外的常量。或者，如果此数据是纯净的且未更改，您可以跳过此步骤。

2. 接下来的两个可能是问题的症结所在:创建类似于此的渲染函数:

      const renderItem = ({ item, index }) => {
        return <DummyComponent item={item} index={index} /> // item and index are not necessarry just demonstrating
      }

1. 确保您有一个返回唯一标识符的 keyExtractor。否则这将以与您的问题类似的方式出错。尝试以下作为健全性检查

    keyExtractor={(item, index) => index.toString()}

如果以上不是问题，您还需要确保 Flatlist 上的数据属性是数组，而不是对象或其他数据结构，如中所述data Flatlist 文档的一部分。

如果您的数据是对象类型，并且您不依赖键来访问其他方法中的特定数据片段，您可以将初始数据更改为对象数组，如下所示:

[
  { ...monthOneData },
  { ...monthTwoData },
  { ...monthThreeData }
]

或者，如果您想将原始数据保留为对象，您可以使用

将其转换为键数组

Object.keys(this.state.data)

然后在你的 FlatList 中你可以做这样的事情:

<FlatList
  data={Object.keys(this.state.data)}
  renderItem={({item}) => 
    <DummyComponent month={this.state.data[item].month} /> // item is now the key value of the objects (almost like a look up table)
    // also not having curly braces implies an implicit return in this case
  }
/>