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

Question

我有一个 FlatList使用标准 RefreshControl ，像这样:

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

这会在执行下拉刷新操作时呈现 native 刷新指示器。我的问题如下:

我可以更改 RefreshControl 的图标/图像吗？使用更符合我的应用程序设计的自定义？

有没有办法只创建一个替换 RefreshControl在 Android 和 iOS 上都可以使用吗？

我找到了 this example自定义的下拉刷新，这是这里引用的其他问题/答案的内容，但该解决方案在 Android 上不起作用(至少不是根据我的测试)。

Answer 1

您可以使用 RefreshControl 的颜色 Prop 你可以传递一个包含一组颜色的数组
例如 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} />)}
/>