0.55

帮助改进此文档

RefreshControl

本文档贡献者：sunnylqm(100.00%)

这一组件可以用在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 (
      <ListView
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh.bind(this)}
          />
        }
        ...
      >
      ...
      </ListView>
    );
  }
  ...
}

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

查看Props

文档

Props

refreshing

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

类型必填
bool是

onRefresh

在视图开始刷新时调用。

类型必填
function否

colors

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

类型必填平台
array of color否Android

enabled

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

类型必填平台
bool否Android

progressBackgroundColor

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

类型必填平台
color否Android

progressViewOffset

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

类型必填平台
number否Android

size

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

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

tintColor

指定刷新指示器的颜色。

类型必填平台
color否iOS

title

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

类型必填平台
string否iOS

titleColor

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

类型必填平台
color否iOS
← 🚧 ProgressViewIOSScrollView →