Javascript React Native（FlatList）：如何知道可视项的渲染何时完成

在react native中使用FlatList组件时，我需要知道何时渲染了所有可见项

当我获得

componentDidMount

时，我提供

data

和

renderItem

，我可以在那里看到平面列表，但由于平面列表组件异步呈现每个项目，它们仅在

componentdiddupdate

之后显示。此外，这可能（也可能）包括视图外项目

我想知道是否有人找到了一种可能的方法来控制进程（而不是使用

setTimeout

），以了解可视项目何时完全呈现

---

谢谢。

我最后使用

renderItem

组件的

componentDidMount

作为元素呈现的指示器

在下面的示例中，

ActivityIndicator

将一直显示，直到呈现前10个项目（我在

initialNumToRender

中设置的数字）

这种方法并不理想。您可能需要根据您的情况对其进行调整，但总体思路如下所示

以下是列表项：

class ListItem extends React.Component<{ onRendered: () => void }> {

  componentDidMount(): void {
    this.props.onRendered();
  }

  render() {
    return (
      <View>
        <Text>Item</Text>
      </View>
    );
  }
}

我还尝试使用贴图收集渲染项目的数量，但在实践中，它们似乎都同时触发

componentDidMount

，因此更简单的方法可能更好

export class FlatListTestScreen extends React.Component<any, { creating: boolean }> {
  constructor(props: any, context: any) {
    super(props, context);
    this.state = {
      creating: true,
    };
  }

  onRenderedItem = () => {
    this.setState({
      creating: false,
    });
  };

  renderItem = (item: any) => {
    return <ListItem onRendered={this.onRenderedItem} />;
  };

  dataArray = Array(20)
    .fill('')
    .map((_, i) => ({ key: `${i}`, text: `item #${i}` }));

  render() {
    const loader = this.state.creating ? <ActivityIndicator /> : <></>;
    return (
      <View>
        {loader}
        <FlatList
          initialNumToRender={10}
          data={ this.dataArray }
          renderItem={ this.renderItem }
          keyExtractor={ item => item.key }
        />
      </View>
    );
  }
}