如何在本机反应中设置 FlatList 的刷新指示器？

Posted 2023-02-16

【中文标题】如何在本机反应中设置 FlatList 的刷新指示器？

【英文标题】：How to set Refresh Indicator of FlatList in react native?

【发布时间】：2018-01-21 09:53:39

【问题描述】：

我正在尝试在 react native 中设置平面列表的刷新指示器，但不知道该怎么做。列表视图有这个道具：

refreshControl=<RefreshControl
                        colors=["#9Bd35A", "#689F38"]
                        refreshing=this.props.refreshing
                        onRefresh=this._onRefresh.bind(this)
                    />
                

但平面列表只有这些：

refreshing=this.props.loading
onRefresh=this._onRefresh.bind(this)

【问题讨论】：

此链接上的解决方案有效，请检查此link。

【参考方案1】：

我找到了解决方案！它可能是虚拟的，但 FlatList 也有一个类似于 ListView 的名为 refreshControl 的道具，但我只是没有测试它！就像这样：

 <FlatList
    refreshControl=<RefreshControl
                    colors=["#9Bd35A", "#689F38"]
                    refreshing=this.props.refreshing
                    onRefresh=this._onRefresh.bind(this) />
 />

【讨论】：

我现在也在使用这个解决方案，它有效，但我担心它不是正确的方法。我将在未来再次研究并更新您。如果您也发现，请及时更新。

我相信 FlatList 是从 ScrollView 或 ListView 构建的，因为它们都是围绕 VirtualizedList 构建的。我将它们视为具有不同 API 和用于不同目的的包装器。共同的方面是它们处理大型列表。我认为为上述答案发布的解决方案是正确的。此外，我认为这是 Occam 的 Razer 答案。 RefreshControl 几乎只是该事件的一个钩子（当 scrollY = 0 时拉动手势），所以如果它被调用，你很好。

添加 tintColor 作为 ios 的道具。否则它的工作完美

【参考方案2】：

您可以使用上面显示的相同RefreshControl 组件将renderScrollComponent 传递给您的FlatList 组件。我为此创建了一个博览会小吃：https://snack.expo.io/rJ7a6BCvW

FlatList 在自身内部使用 VirtualizedList，对于 VirtualizedList 组件，它需要一个 renderScrollComponent:https://facebook.github.io/react-native/docs/virtualizedlist.html#renderscrollcomponent

【讨论】：

我试过了，但没用！对象不是函数（评估 'this.props.renderScrollComponent(this.props)'）

我也试过这个。我也不确定它是否正确，因为它似乎改变了整个滚动组件。不仅仅是刷新控制。以后我会研究更多，如果您有任何发现或对renderScrollComponent方法非常确定，请及时更新。