【React Native开发】 - RefreshControl下拉刷新

1.RefreshControl介绍

RefreshControl组件是ScrollView组件内部的，为ScrollView添加一个下拉刷新的功能。当ScrollView的垂直方向上的偏移量

ScrollY:0时，手指往下拖拽ScrollView就会触发onRrefresh事件。

2.RefreshControl属性

 - onRefresh：PropTypes.func，视图刷新时调用。

 - refreshing：PropTypes.bool.isRequired，是否正在刷新中。

 - progressBackgroundColor：ColorPropType类型，加载指示器的背景颜色。

 - enabled：PropTypes.bool，android平台适用，设置下拉刷新是否可用。

 - colors PropTypes.arrayOf(ColorPropType)：android平台适用，设置加载指示器的颜色，至少设置一种颜色。

 - size: PropTypes.oneOf([RefreshLayoutConsts.SIZE.DEFAULT,RefreshLayoutConsts.SIZE.LARGE])，android平台适用，加载指示器的大小。

 - tintColor:ColorPropType类型，iOS平台适用，设置加载指示器的颜色。

 - title：PropTypes.string，iOS平台适用，加载指示器下面的文本。

3.实例

index.android.js和index.ios.js中的代码相同：

import './luancher'

//luancher.js代码：
import Root from './refreshControl/root'

AppRegistry.registerComponent('ImageDemo', () => Root);

//refreshControl中的代码：

//root.js

import React,{Component} from 'react'
import {
    StyleSheet,
    View,
    Text,
    Image,
    ScrollView,
    RefreshControl,
    Dimensions,
} from 'react-native'
import data from './datas'
const {width,height} = Dimensions.get('window')
export default class Root extends Component{
    constructor(props){
        super(props)
        this.state={
            data:[],
            isRefreshing:false,
        }
    }
    render(){
        return (
            <ScrollView
                style={styles.scrollStyle}
                refreshControl={
                    <RefreshControl
                     refreshing={this.state.isRefreshing}
                        onRefresh={this._onRefresh.bind(this)}
                        tintColor="#bbb"
                      colors={['#ddd', '#0398ff']}
                        progressBackgroundColor='#fff'>
                    </RefreshControl>
                }>
                {
                    this.state.data.map((item,i) => {
                        return <Item key={i} data={item}></Item>
                    })
                }
            </ScrollView>
        )
    }
    componentDidMount(){
        this.setState({
            isRefreshing:true,
        })
        setTimeout(() => {
            this.setState({
                data:data.list,
                isRefreshing:false,
            })
        },1500)
    }
    _onRefresh(){
        this.setState({
            isRefreshing:true,
        })
        setTimeout(() => {
            this.setState({
                data:data.refresh.concat(this.state.data),
                isRefreshing:false,
            })
        },1500)
    }

}
class Item extends Component{
    constructor(props){
        super(props)
    }
    render(){
        return (
            <View style={styles.item}>
                <Text style={styles.text}>{this.props.data.name}</Text>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
    },
    scrollStyle:{
        backgroundColor:'#f3f3f3',
    },
    item:{
        flex:1,
        height:40,
        justifyContent:'center',
        alignItems:'center',
        borderBottomWidth:1,
        borderBottomColor:'#ccc',
        marginHorizontal:1,
    },
    text:{
        fontSize:14,
    },
})
//datas.js
let d = {
    list:[
        {
            name:'数据1',
        },
        {
            name:'数据2',
        },
        {
            name:'数据3',
        },
        {
            name:'数据4',
        },
        {
            name:'数据5',
        },
        {
            name:'数据6',
        },
    ],
    refresh:[
        {
            name:'刷新数据1',
        },
        {
            name:'刷新数据2',
        },
        {
            name:'刷新数据3',
        },
        {
            name:'刷新数据4',
        },
        {
            name:'刷新数据5',
        },
        {
            name:'刷新数据6',
        },
    ],
}
export default d

4.效果