react native的页面整体下拉刷新

一、背景

      我这边本来是用FastList自带的刷新机制来进行刷新的。但是由于我页面里面的FastList组件太多，刷新方面变得混乱起来。后来又看RN的文档才发现，原来RefreshControl这个刷新组件也可以在ScrollView里面使用。相当于整体页面的刷新，很不错。

二、使用方法

1、在RN的顶部引入RefreshControl,组件

2、属性

    onRefresh   function    当视图开始刷新的时候调用
    refreshing  bool    决定加载进去指示器是否为活跃状态，也表名当前是否在刷新中

android平台特有：

colors  ColorPropType   指定至少一种颜色用来绘制刷新指示器。
enabled bool    指定是否要开启刷新指示器。
progressBackgroundColor ColorPropType   指定刷新指示器的背景色。
size    RefreshLayoutConsts.SIZE.DEFAULT    指定刷新指示器的大小，具体数值可参阅RefreshControl.SIZE.
progressViewOffset  React.PropTypes.number  指定刷新指示器的垂直起始位置(top offset)。

ios平台特有：

tintColor   ColorPropType   指定刷新指示器的颜色。
iostitle    string  指定刷新指示器下显示的文字。

3、找到你的scrollView组件

<ScrollView  style={{height:gScreen.height-40,}}
                       refreshControl={  //设置下拉刷新组件
                         <RefreshControl
                           refreshing={this.state.isRefreshing}  
                           onRefresh={this.onRefresh.bind(this)}  //(()=>this.onRefresh)或者通过bind来绑定this引用来调用方法
                           tintColor='white'
                           title= {this.state.isRefreshing? '刷新中....':'下拉刷新'}
                         />
                       }
          >

解释：

1）this.state.isRefreshing 指的是在初始化的时候，我们需要指定这个值为false，代表不刷新，当下拉的时候，把这个值改成true，代表可以开始刷新了。
2）this.onRefresh.bind(this) 这个代表绑定的方法。也就是开始刷新之后，执行我们自己的逻辑部分方法。
3）如果需要定义一些特殊的属性，请参照上面的属性表来自定义

4、我们自己的处理方法

 onRefresh() {
 //先修改刷新状态为true
    this.setState({isRefreshing: true});
    console.log("开始新的刷新方法");
    setTimeout(() => {
       //你的刷新逻辑
       //逻辑执行完之后，修改刷新状态为false
      this.setState({isRefreshing: false});
    }, 2000);
  }

end