javascript - React-Native (FlatList) : How to know when the rendering of visible items has finished

Question

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

我提供data和 renderItem当我得到 componentDidMount我可以在那里看到 FlatList，但是因为 FlatList 组件异步呈现每个项目，它们只在 componentDidUpdate 之后显示.此外，这可能(并且可能会)包括不可见的项目。

我想知道是否有人找到了一种可能的方法来控制进程(不使用 setTimeout )来了解可见项目何时完全呈现。

谢谢。

Answer 1

我最终使用了 componentDidMount的renderItem组件作为元素被渲染的指示器。

在下面的示例中 ActivityIndicator将一直显示到前 10 个项目被渲染(我在 initialNumToRender 中设置的数字)。

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

这是列表项:

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

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

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

这是带有 FlatList 的屏幕使用上面的 ListItem:

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

我还尝试使用 map 来收集渲染项目的数量，但在实践中，它们似乎都触发了 componentDidMount同时，更简单的方法可能会更好。