react-native ScrollView下使用 RefreshControl 的 loading指示图标模拟下拉刷新页面场景

效果图：

 

 

代码如下：

_onRefresh = () => {
    this.setState({ refreshing: true });
    // setTimeout模拟请求获取数据回调
    setTimeout(() => {
      this.setState({ refreshing: false });
    }, 3000);
};

 <ScrollView
          style={{ flex: 1 }}
          refreshControl={
            <RefreshControl
              // size={RefreshControl.SIZE.LARGE} // size属性改变Android上的indicator的大小，值默认为DEFAULT,可以改成 LARGE.
              enabled={true}
              colors={[OAColor.headBg, "white"]} // colors属性改变Android上的indicator的颜色，值为数组，可以只设置一个颜色，
              tintColor={OAColor.headBg} // tintColor属性改变iOS上的indicator的颜色，只能指定一个值。
              refreshing={refreshing}
              onRefresh={this._onRefresh}
            />
          }
        >
          {this.renderSwiper()}

          <View style={{ flex: 1 }}>
            <Text
              style={{
                zIndex: 2,
                position: "absolute",
                top: -62,
                width: "70%",
                color: OAColor.white,
                paddingLeft: OAVariables.h_spacing_lg
              }}
              numberOfLines={1}
            >
              轮播图新闻标题...
            </Text>
            <View
              style={{
                position: "absolute",
                top: -70,
                width: "100%",
                height: 30,
                paddingVertical: OASize(8),
                opacity: 0.5,
                backgroundColor: OAColor.black
              }}
            />
          </View>

          {this.renderMainNav()}
          {this.renderNotice()}
          <WhiteSpace height={10} />
          {this.renderNews()}
</ScrollView>