React Native FlatList RefreshControl 下拉刷新指示器loading图标改变颜色

FlatList用来显示列表数据，而列表经常要用到下拉刷新功能， 那FlatList怎么做到下拉刷新呢？其实加上两个属性onRefresh、refreshing 就可以实现下拉刷新了，如图：

 

<FlatList
  data={data}
  renderItem={this.renderItem}
  refreshing={true}
  onRefresh={this.onRefresh}
/>

android.gif

 

iOS.gif

可以看到，indicator(指示器)的颜色默认为黑色，相当丑，而且还无法修改。如果你觉得可以接受，这样做也行，因为实现起来很简单。
但是想要修改indicator的颜色怎么办呢？其实还有一个组件：RefreshControl，这时候就不需要写FlatList的onRefresh和refreshing属性了。具体用法如下：

 

<FlatList
  data={data}
  renderItem={this.renderItem}
  refreshControl={
     <RefreshControl
        refreshing={true}
        onRefresh={this.onRefresh}
        tintColor="red"
        colors={["red","green"]}
        size={RefreshControl.SIZE.LARGE}
    />
 }
/>

这样就可以修改indicator的颜色了，其中：

• colors属性改变Android上的indicator的颜色，值为数组，可以只设置一个颜色，
• tintColor属性改变iOS上的indicator的颜色，只能指定一个值。
• size属性改变Android上的indicator的大小，值默认为DEFAULT,可以改成 LARGE.