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

Question

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

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

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

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

Answer 2

正确的方法是使用函数返回组件，这样：

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

这解决了'对象不是一个函数（评估'this.props.renderScrollComponent（this.props）'）'错误。

Answer 3

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

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

Answer 4

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

Answer 5

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

这涵盖了ios和android

Answer 6

在RefreshControl组件的官方文档中，它被声明为 -该组件在 ScrollView 或 ListView 中用于添加拉动刷新功能。 当ScrollView在scrollY:0时，向下滑动触发onRefresh事件

所以对于FlatList不要直接使用它，因为它们提供了两个名为refresh 和 onRefresh的特殊道具 - 标准的 RefreshControl 将被添加用于“拉到刷新”功能。 确保还设置了刷新道具。

用法 -

步骤1：

const wait = (timeout) => { // Defined the timeout function for testing purpose
    return new Promise(resolve => setTimeout(resolve, timeout));
}

const [isRefreshing, setIsRefreshing] = useState(false);

const onRefresh = useCallback(() => {
        setIsRefreshing(true);
        wait(2000).then(() => setIsRefreshing(false));
}, []);

第2步：

现在使用组件作为

<FlatList
     style={styles.flatListStyle}
     data={inProgressProjects.current}
     keyExtractor={item => item._id}
     renderItem={renderItem}
     showsVerticalScrollIndicator={false}
     refreshing={isRefreshing} // Added pull to refesh state
     onRefresh={onRefresh} // Added pull to refresh control
/>

有关更多信息，请参阅此处 -

https://reactnative.dev/docs/refreshcontrol

https://reactnative.dev/docs/flatlist#onrefresh

希望这会对您或其他人有所帮助。

谢谢！