javascript - react-native flatlist检测何时加载和呈现提要

我正在使用FlatList实现一个本机反应式新闻提要，我想检测到该提要已加载，并且呈现了前几项。想法是，将显示初始页面，直到呈现新闻提要(https://facebook.github.io/react-native/blog/2018/01/18/implementing-twitters-app-loading-animation-in-react-native.html)，此时初始提要将为新闻提要动画。问题是我在哪里检测到isRendered事件。我的FlatList有两个可能有趣的 Prop :

class NewsFeed extends Component {

    state = { data: [] }

    loadData = async () => { ... }

     renderItem = ({ item }) => { ... }

    render () {
       return <FlatList renderItem = {this.renderItem} data={this.state.data} />
    }
}

我尝试将isRendered bool(boolean) 值标志翻转为loadData的最后一行，但是从登录屏幕过渡后，图片渲染之前仍然需要一秒钟(有时)的时间。因此，我在isRendered函数中翻转了renderItem bool(boolean) 值标志，并且我们根本没有越过闪屏，这意味着该函数永远不会运行。

最佳答案

您可能需要检查render函数中isRendered的值。如果isRendered仍为false，则显示初始屏幕。然后，如果 bool(boolean) 值为true，则可以从此组件开始动画，并在数据已加载时立即显示列表。为此，请像以前一样调用setState来在loadData中翻转isRendered bool(boolean) 值，以便在加载数据后再次调用render函数。 (您可以在componentDidMount中调用loadData函数，因为在安装组件时将立即调用该函数)。

如果动画是从其他组件调用的，则您可能希望将数据加载到该组件并在该组件的render函数中进行isRendered检查，然后可能将数据作为 Prop 传递，以确保NewsFeed组件已经加载了数据。

关于javascript - react-native flatlist检测何时加载和呈现提要，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51510516/