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

hzxOnlineOk

于 2020-03-12 10:42:28 发布

阅读量828

点赞数

分类专栏： react-native

本文链接：https://blog.csdn.net/hzxOnlineOk/article/details/104812080

版权

react-native 专栏收录该内容

95 篇文章

订阅专栏

本文深入探讨了在React Native中使用RefreshControl组件实现下拉刷新功能的方法。通过代码示例展示了如何设置refreshing状态，调整indicator的大小、颜色，并通过setTimeout模拟数据加载过程。此外，还介绍了如何将该组件应用到ScrollView中，以实现更佳的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

代码如下：

_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>