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

Question

我正在使用 FlatList 实现一个 react-native newsfeed，我想检测然后加载 feed，并呈现前几个项目。这个想法是，在呈现新闻源 ( 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 标志翻转为 loadData 中的最后一行，但是从登陆屏幕转换后，它仍然需要几分之一秒(有时) 在图片渲染之前。所以我在 renderItem 函数中翻转了 isRendered bool 标志，我们根本就不会越过闪屏，这意味着该函数永远不会运行。

Answer 1

您可能想检查渲染函数中 isRendered 的值。如果 isRendered 仍然为 false，则显示启动画面。然后，如果 bool 值为真，您可以从此组件开始动画并在数据已加载时立即显示列表。为了使这项工作正常进行，调用 setState 来翻转 loadData 中的 isRendered bool 值，就像您之前所做的那样，因此一旦加载数据，就会再次调用渲染函数。 (并且您可以调用 componentDidMount 中的 loadData 函数，因为当组件被挂载时，它会立即被调用)。

如果动画是从不同的组件调用的，您可能希望在那里加载数据并在该组件的渲染函数中执行 isRendered 检查，然后可能将数据作为 prop 传递以确保 NewsFeed 组件已经加载数据。