React Native 其他组件之 RefreshContro

这一组件可以用在ScrollView或FlatList内部，为其添加下拉刷新的功能。当ScrollView处于竖直方向的起点位置（scrollY: 0），此时下拉会触发一个onRefresh事件。

属性

1.通用属性

名称	类型	必填	说明
refreshing	bool	是	视图是否应该在刷新时显示指示器。
onRefresh	function	否	在视图开始刷新时调用。

2.仅支持 iOS 的属性

名称	类型	必填	说明
tintColor	color	否	指定刷新指示器的颜色
title	string	否	指定刷新指示器下显示的文字。
titleColor	color	否	指定刷新指示器下显示的文字的颜色。

3.仅支持 Android 的属性

名称	类型	必填	说明
colors	array of color	否	指定至少一种颜色用来绘制刷新指示器。
enabled	bool	否	指定是否要启用刷新指示器。
progressBackgroundColor	color	否	指定刷新指示器的背景色。
progressViewOffset	number	否	指定刷新指示器的垂直起始位置
size	enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE)	否	指定刷新指示器的大小

实例

1. 逻辑代码

import React, { Component } from 'react';
import {
  StyleSheet,
  RefreshControl,
  View,
  Text,
  ScrollView
} from 'react-native';

export default class App extends Component { 
  constructor(props) { 
    super(props);
    this.state = {
      isRefreshing:false,
    }
  }

  _onRefresh() { 
    this.setState({
      isRefreshing: true
    });

    setTimeout(() => {
      this.setState({
        isRefreshing: false
        //加载数据
      })
    }, 5000);
  }
  render() {
    return (
      <View style={styles.container}>
        <ScrollView
          refreshControl={
            <RefreshControl
              refreshing={this.state.isRefreshing}
              onRefresh={this._onRefresh.bind(this)}
              colors={['red', 'blue', 'green']}
              progressBackgroundColor='#ffff00'
              enabled={true}
            />
          }
        >
        <Text>显示数据</Text>
        </ScrollView>
        </View>
    )
  }
}

const styles = StyleSheet.create({
  
  container: {
    flex: 1,
  },
  
});

2. 效果图

refresh.jpg