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

【问题标题】：React Native custom RefreshControl component doesn't work in FlatList on AndroidReact Native 自定义 RefreshControl 组件在 Android 上的 FlatList 中不起作用
【发布时间】：2021-10-21 09:11:04
【问题描述】：

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

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

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 添加 RefreshControl 将起作用。

我该如何解决这个问题？

感谢您的宝贵时间！

【问题讨论】：

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

【解决方案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}
    />
  )
}

调用站点将保持不变。

【讨论】：