React-Native (FlatList)：如何知道可見項的渲染何時完成

Question

在 React Native 中使用 FlatList 組件時，我需要知道所有可見項何時都已呈現。

我提供data和renderItem時，我得到了componentDidMount我可以看到FlatList有，但因為FlatList組件異步呈現每個項目他們只后顯示componentDidUpdate 。 此外，這可能（並且可能會）包括非視圖項目。

我想知道是否有人找到了一種可能的方法來控制過程（不是使用setTimeout ）來了解何時完全呈現可見項目。

謝謝。

Answer 1

我結束了使用的componentDidMount所述的renderItem組分作為該元素被呈現的指示符。

在下面的示例中， ActivityIndicator將一直顯示，直到呈現前 10 個項目（我在initialNumToRender設置的initialNumToRender ）。

這種方法並不理想。 您可能需要針對您的情況對其進行調整，但總體思路如下所示。

這是列表項：

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

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

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

這是使用上面 ListItem 的帶有FlatList的屏幕：

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 ，因此更簡單的方法可能會更好。