下拉刷新组件封装

最新推荐文章于 2025-06-19 22:23:49 发布

热爱前端的小君同学

最新推荐文章于 2025-06-19 22:23:49 发布

阅读量719

点赞数

CC 4.0 BY-SA版权

分类专栏： react-native

本文链接：https://blog.youkuaiyun.com/qq_37815596/article/details/88129826

react-native 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了React Native中RefreshControl组件的使用方法及属性，包括refreshing、colors、enabled等，并展示了如何通过该组件实现下拉刷新功能。同时，文章提供了具体的代码示例，帮助读者更好地理解和应用。

经常用在上拉刷新和下拉加载更多中，接下来利用RefreshControl封装一个下拉刷新组件

RefreshControl属性

refreshing

加载指示灯是否在加载中

colors[ColorPropType]

Android平台专用，设置加载指示器的颜色，至少设置一种，最多可以设置4种

enabled

Android平台专用，用来设置下拉刷新是否可用

progressBackgroundColor[ColorPropType]

用来设置加载指示器的背景颜色

size

Android平台专用，用来设置加载指示器的尺寸大小。默认值为RefreshLayout Consts.SIZE.DEFAULT

tintColor[ColorPropType]

ios平台专用，用来设置加载指示器的颜色

title

ios平台专用，用来设置加载指示器下面的标题文本信息

RefreshControl方法

onRefresh()

当视图开始刷新的时候，调用对于下拉过程中加载的效果需要使用一个新的组件ActivityIndicator，它是React Native提供的指示器，提供加载过程中旋转的效果。默认有4个属性：size、color、animating和hidesWhenStopped

size:指示器大小，提供的枚举值，即large、small，默认是small。在Android平台支持设置指定数字大小。
color:指示器颜色，默认为white
animating:是否显示动画指示器，默认是显示true
hidesWhenStopped:在没有动画指示器的时候是否隐藏，默认为true

import React, { Component } from 'react';
import { RefreshControl, View, ScrollView, Text, Image, TouchableWithoutFeedback, StyleSheet } from 'react-native';
//设置样式
const HomeStyle = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignContent: 'center',
    backgroundColor:'#fff',
    flex:1
  }
});
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isRefreshing: false,
      loaded: 0
    }
  }
  _onClick = () => {
    this.setState({
      loaded: this.state.loaded + 1
    })
  };
  _onRefresh = () => {
    this.setState({
      isRefreshing: true
    });
    //间隔5秒结束下拉刷新
    setTimeout(() => {
      this.setState({
        loaded: 0,
        isRefreshing: false
      })
    }, 5000);
  }
  render() {
    return (
      <View style={HomeStyle.container}>
        <ScrollView
          refreshControl={
            <RefreshControl refreshing={this.state.isRefreshing}
              onRefresh={this._onRefresh}
              tintColor="#ff0000"
              title="Loading..."
              titleColor="#00ff00"
            />
          }>
          <TouchableWithoutFeedback onPress={this._onClick}>
            <View>
              <Image source={require('./pig.jpg')} />
              <Text>{this.state.loaded}</Text>
            </View>
          </TouchableWithoutFeedback>
        </ScrollView>
      </View>
    )
  }
}
export default App