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

标签 react-native

我在 render() 函数中有一个带有引用的 FlatList

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

我需要使用this.flatListRef 来调用FlatList 的 方法,这只有在呈现FlatList 时才有可能。否则会出现以下错误,

Cannot read the property 'ScrollToIndex' of undefined

(我试图调用FlatList的ScrollTOIndex方法)

其实我在componentDidMount()方法中调用了ScrollTOIndex,但是还是出现这个错误。因此,很明显 componentDidMount()render() 完全完成之前被调用。

谁能告诉我渲染完成的确切时间?

最佳答案

This is clear that componentDidMount() is called before render() finishes completely.

根据此架构,第一个 render 阶段发生在之前 componentDidMounthttp://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

enter image description here

实例:

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

关于React-Native:如何知道渲染何时完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60186998/

相关文章:

reactjs - 平面列表 - ScrollToIndex 应与 getItemLayout 或 onScrollToIndexFailed 结合使用

javascript - 如何在android上制作模糊图像? react native

reactjs - 在SectionList上执行scrollToLocation时发生崩溃

react-native - 导航 ('DrawerOpen' )不适用于 createSwitchNavigator 和 createStackNavigator

reactjs - 我是否*必须*展平 React.JS 中的所有分层组件声明?

javascript - 通过特定查询或突变重置缓存

reactjs - react native 重新加载不起作用

react-native - React Native 明文多个 TextInput 框

ios - React Native App 在设备的启动屏幕上崩溃

javascript - React Native - Android 应用程序在 Debug 上工作,在 Release 上崩溃