react native学习笔记12——RefreshControl下拉刷新

前端之家收集整理的这篇文章主要介绍了react native学习笔记12——RefreshControl下拉刷新前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

RefreshControl是React Native官方提供的下拉刷新组件,用在ScrollView和FlatList内部,为其添加下拉刷新的功能。它是对原生平台下拉刷新组件的一个封装,使用起来比较方便快捷,体验类似Native的下拉刷新组件,但其缺点是不能进行自定义下拉刷新头部,并且只能使用与ScrollView,FlatList这种带有滚动功能的组件之中。
以ScrollView为例,当ScrollView处于竖直方向的起点位置(scrollY:0),此时下拉会触发一个onRefresh事件。

属性

属性 类型 描述
onRefresh function 当视图开始刷新的时候调用
refreshing bool 决定加载进去指示器是否为活跃状态,也表名当前是否在刷新中

android平台特有

属性 类型 描述
colors ColorPropType 指定至少一种颜色用来绘制刷新指示器。
enabled bool 指定是否要开启刷新指示器。
progressBackgroundColor ColorPropType 指定刷新指示器的背景色。
size RefreshLayoutConsts.SIZE.DEFAULT 指定刷新指示器的大小,具体数值可参阅RefreshControl.SIZE.
progressViewOffset React.PropTypes.number 指定刷新指示器的垂直起始位置(top offset)。

ios平台特有

属性 类型 描述
tintColor ColorPropType 指定刷新指示器的颜色。
iostitle string 指定刷新指示器下显示文字

使用实例

前面介绍了RefreshControl组件的相关属性,下面用实例演示RefreshControl的具体使用方法。(在官方实例基础上做了ES6语法改造)
以ScrollView为例,在ScrollView中通过设置refreshControl属性来指定RefreshControl组件,用于为ScrollView提供下拉刷新功能,然后设置RefreshControl的onRefresh方法控制刷新时具体操作。

import React,{ Component } from 'react';
import {
    AppRegistry,ScrollView,StyleSheet,Text,View,RefreshControl,} from 'react-native';

class ListRowComponent extends React.Component{
    render(){
        return (
            <View style={styles.row}> <Text style={styles.text}> {this.props.data.text} </Text> </View> ); } }; export default class RefreshControlDemo extends Component { constructor(props) { super(props); this.state = { isRefreshing: false,loaded: 0,rowData: Array.from(new Array(10)).map( (val,i) => ({text: i})),}; } render() { var rows = this.state.rowData.map((row,indexKey) => { return <ListRowComponent key={indexKey} data={row}/>;
        });
        return (
            <ScrollView style={styles.scrollview} refreshControl={ //设置下拉刷新组件 <RefreshControl refreshing={this.state.isRefreshing} onRefresh={this.onRefresh.bind(this)} //(()=>this.onRefresh)或者通过bind来绑定this引用来调用方法 tintColor='red' title= {this.state.isRefreshing? '刷新中....':'下拉刷新'} /> }> {rows} </ScrollView> ); } onRefresh() { this.setState({isRefreshing: true}); setTimeout(() => { // 准备下拉刷新的5条数据 var rowNewData = Array.from(new Array(5)) .map((val,i) => ({ text: '下拉刷新增加的数据行 ' + (+this.state.loaded + i) })) .concat(this.state.rowData); this.setState({ loaded: this.state.loaded + 5,isRefreshing: false,rowData: rowNewData,}); },2000); } } const styles = StyleSheet.create({ row: { borderColor:'red',borderWidth:5,padding:20,backgroundColor:'#00CCFF',margin:5,},text:{ alignSelf:'center',color:'white',scrollerview:{ flex:1,} });

源码Git地址

原文链接:https://www.f2er.com/react/302624.html

猜你在找的React相关文章