Question

我正在使用FlatList实现一个本机新闻提要，我想检测一下提要是否已加载，并渲染了前几项。想法是，将显示初始页面，直到呈现新闻源（https://facebook.github.io/react-native/blog/2018/01/18/implementing-twitters-app-loading-animation-in-react-native.html），此时初始源将动画化为新闻源。问题是我在哪里检测到isRendered事件。我的FlatList有两个有趣的道具：

class NewsFeed extends Component {

    state = { data: [] }

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

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

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

我尝试将isRendered布尔标志翻转为loadData中的最后一行，但是从登录屏幕过渡后，仍然需要一秒钟（有时）的时间才能渲染图片。因此，我在isRendered函数中翻转了renderItem布尔值标志，而我们根本没有越过启动屏幕，这意味着该函数永远不会运行。

Answer 1

You might want to check the value of isRendered in the render function. If isRendered is still false, you display the splash screen. Then if the boolean is true, you can begin the animation from this component and display the list right away as the data is already loaded. To make this work, call setState to flip the isRendered boolean in loadData as you were doing before, so the render function gets called again once the data is loaded. (And you can call the loadData function in componentDidMount as this will be called right away when the component gets mounted).

If the animation is being called from a different component, you might want to load the data there and do the isRendered check in that component's render function, and then possibly pass the data as a prop to make sure the NewsFeed component is already loaded with the data.

react-native Flatlist检测何时加载和呈现Feed

1 个答案: