下拉刷新组件封装

﹏ヽ暗。殇╰゛Y 2022-03-14 13:56 295阅读 0赞

经常用在上拉刷新和下拉加载更多中，接下来利用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