Q群 567530369,小伙伴们都在这里等你哦~

RefreshControl

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

示例


class RefreshableList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
    };
  }

  _onRefresh = () => {
    this.setState({refreshing: true});
    fetchData().then(() => {
      this.setState({refreshing: false});
    });
  }

  render() {
    return (
      <ScrollView
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh}
          />
        }
        ...
      />
    );
  }
  ...
}

注意:refreshing是一个受控属性, 所以必须在onRefresh函数中设置为true,否则loading指示器会立即停止。

查看Props


文档

Props

refreshing

视图是否应该在刷新时显示指示器。

类型必填
bool

onRefresh

在视图开始刷新时调用。

类型必填
function

colors

指定至少一种颜色用来绘制刷新指示器。

类型必填平台
array of colorAndroid

enabled

指定是否要启用刷新指示器。

类型必填平台
boolAndroid

progressBackgroundColor

指定刷新指示器的背景色。

类型必填平台
colorAndroid

progressViewOffset

指定刷新指示器的垂直起始位置(top offset)。

类型必填平台
numberAndroid

size

指定刷新指示器的大小,具体数值可参阅RefreshControl.SIZE.

类型必填平台
enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE)Android

tintColor

指定刷新指示器的颜色。

类型必填平台
coloriOS

title

指定刷新指示器下显示的文字。

类型必填平台
stringiOS

titleColor

指定刷新指示器下显示的文字的颜色。

类型必填平台
coloriOS