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

【问题标题】：How to set Refresh Indicator of FlatList in react native?如何在本机反应中设置 FlatList 的刷新指示器？
【发布时间】：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。

标签： android react-native react-native-flatlist

【解决方案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方法非常确定，请及时更新。