如何在 React Native 中设置 FlatList 的刷新指示器？

Question

我正在尝试在 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)}

Answer 1

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

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

Answer 2

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

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

Answer 3

我正在将 bounces={false} 传递到我的 Flatlist，这导致了问题。这将不允许您刷新。如果您想使用上面提到的一种解决方案，请将其删除。谢谢

Answer 4

refreshControl={
          <RefreshControl
            isRefreshing={isRefreshing}
            onRefresh={loadProducts}
            colors={[Colors.GreenLight]} // for android
            tintColor={Colors.GreenLight} // for ios
          />
        }

这包括 ios 和 android

如何在 React Native 中设置 FlatList 的刷新指示器？

How to set Refresh Indicator of FlatList in react native?

android

react-native

react-native-flatlist