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

Question

我有一个

FlatList

，它使用标准

RefreshControl

，如下所示：

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

这会在执行拉动刷新操作时呈现本机刷新指示器。我的问题如下：

1. 我可以将

   RefreshControl

   使用的图标/图像更改为更符合我的应用程序设计的自定义图标/图像吗？
2. 有没有办法创建一个同时适用于 Android 和 iOS 的替代品

   RefreshControl

   ？

我发现了这个自定义下拉刷新的示例，这是此处参考的其他问题/答案，但该解决方案不适用于 Android（至少根据我的测试）。

Answer 1

您可以使用RefreshControl的tintColor属性来选择您选择的加载指示器的颜色

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

Answer 2

您可以使用

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} />)}
/>