React-Native：如何知道渲染何时完成

Question

我在FlatList函数中有render()，带有引用，

 <FlatList
    ref={(ref) => { this.flatListRef = ref }}
    data={this.state.data}
    renderItem={({ item, index }) => this.renderOuterCard(item, index)}
/>

我需要使用this.flatListRef来调用FlatList's方法，只有在渲染FlatList时才有可能。否则会发生以下错误，

无法读取未定义的属性'ScrollToIndex'

（我尝试调用FlatList's ScrollTOIndex方法）

事实上我在ScrollTOIndex方法中调用了componentDidMount()，但是仍然发生此错误。因此，很明显componentDidMount()在render()完全完成之前被调用。

有人能准确地完成渲染时让我知道吗？

Answer 1

很明显，在render（）完全完成之前调用componentDidMount（）。

根据此架构，第一componentDidMount阶段发生在之前 ymin。 http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

实时示例：

https://snack.expo.io/@flexbox/flatlist-with-state-example

Answer 2

我遇到了同样的问题。我确实有一个使用FlatList的组件，我想知道列表在第一个渲染中何时渲染了可见项（就绪状态）。

我发现在主组件上componentDidMount被触发，因为FlatList组件也已安装。而且由于FlatList组件会异步渲染每个项目，因此它们只会在componentDidUpdate之后显示。

我已经挣扎了一段时间，即使使用componentDidUpdate方法，我也只能在FlatList获得新数据（不呈现项目）的那一刻。

所以我发现我可以拦截renderItem方法来创建一些逻辑，以便更好地估计渲染的内容和时间。另一个选择是让setTimeout（非常hacky）根据平均时间（非常差的解决方案）触发工作。

如果某人有适当的方法可以知道FlatList何时完成呈现inView项，请分享。

谢谢。