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>