React-Native (FlatList)：如何知道可见项的渲染何时完成

Question

在 React Native 中使用 FlatList 组件时，我需要知道所有可见项何时都已呈现。

我正在提供data，renderItem当我得到时，componentDidMount我可以在那里看到 FlatList，但是因为 FlatList 组件异步呈现每个项目，它们只在 on 之后显示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>
    );
  }
}

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