如何更改RefreshControl的加载指示器？

Question

我有一个FlatList使用标准的RefreshControl，如下所示：

<FlatList 
    data={items}
    refreshControl={<RefreshControl refreshing={loading} onRefresh={this.refresh} />}
    renderItem={({ item, index }) => (<ListItem item={item} />)}
/>

执行“上拉到刷新”操作时，这将呈现本机刷新指示器。我的问题如下：

1. 我可以将RefreshControl使用的图标/图像更改为与我的应用程序设计更匹配的自定义图标/图像吗？
2. 有没有一种方法可以创建RefreshControl在Android和iOS上都可以使用的替代产品？

我找到了此示例的自定义“套用刷新”，此处引用了其他问题/答案，但该解决方案在Android上不起作用（至少根据我的测试）。

Answer 1

您可以使用颜色属性，RefreshControl您可以传递包含一组颜色的数组

例如colors={["gray","orange"]}

这将在每次完成一轮旋转时改变指示器的颜色

import {
  FlatList
  RefreshControl
} from "react-native"

<FlatList 
    data={items}
    refreshControl={
        <RefreshControl 
         refreshing={loading} 
         onRefresh={this.refresh}
         colors={["gray","orange"]} 
        />
    }
    renderItem={({ item, index }) => (<ListItem item={item} />)}
/>