React Native 自定义 RefreshControl 组件在 Android 上的 FlatList 中不起作用

Question

我为 RefreshControl 制作了一个自定义组件，因此我可以更改 RefreshControl 提供的 title property。

最后这是我的自定义 RefreshControl 组件的 return：

const [counter, setCounter] = useState(0)
    useEffect(() => {
        if (!refreshing && counter > 0) {
            setTimeout(() => {
                setCounter(previousValue => previousValue + 1)
            }, 500)
        }

        !refreshing && counter === 0 && setCounter(previousValue => previousValue + 1)
    }, [refreshing])

    return (
            <RefreshControl
                onRefresh={onRefresh}
                refreshing={refreshing}
                title={counter > 1 ? 'Refreshing': 'Loading data'}
                tintColor={Colors.main}
                titleColor={Colors.main}
            />
        )

我的这个组件在FlatList中的使用如下：

<FlatList
                ref={flatListRef}
                style={styles.flatList}
                contentContainerStyle={styles.contentContainer}
                showsVerticalScrollIndicator={false}
                data={data}
                renderItem={renderItem}
                keyExtractor={item => item.number.toString()}
                refreshControl={
                    <MyRefreshControl
                        onRefresh={makeRequest}
                        refreshing={isRefreshing}
                    />
                }
            />

这个实现 works great on iOS 但是在 Android 上 FlatList 就消失了，甚至不会显示在屏幕上，但是如果我直接从react-native 会起作用。

我该如何解决这个问题？

感谢您的宝贵时间！

Answer 1

将自定义组件作为 refreshControl 传递的文档很少，但是如果您提供自己的组件，则需要将额外的道具传播到您的组件中并将它们传递给 RefreshControl。所以你会希望你的代码看起来像这样：

export const MyRefreshControl = ({
  refreshing,
  onRefresh,
  counter,
  ...props
}) => {
  return (
    <RefreshControl
      onRefresh={onRefresh}
      refreshing={refreshing}
      title={counter > 1 ? 'Refreshing' : 'Loading data'}
      tintColor={Colors.main}
      titleColor={Colors.main}
      {...props}
    />
  )
}

并且调用站点将保持不变。

React Native 自定义 RefreshControl 组件在 Android 上的 FlatList 中不起作用

React Native custom RefreshControl component doesn't work in FlatList on Android

android

react-native

react-native-flatlist