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

Question

我为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只是消失，甚至不会显示在屏幕上，但如果我直接添加RefreshControl从react-native将工作。

如何解决这个问题?

感谢您的宝贵时间!

Answer 1

将自定义组件作为refreshControl传递很少有文档记录，但如果您提供自己的组件，则需要将额外的props扩展到组件中并将它们传递给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}
/>
)
}

callsite将保持不变。