0
点赞
收藏
分享

微信扫一扫

【Kevin Learn React Native】--> RefreshControl

这一组件可以用在ScrollView或FlatList内部,为其添加下拉刷新的功能。当ScrollView处于竖直方向的起点位置(scrollY: 0),此时下拉会触发一个​​onRefresh​​事件。

属性

1.通用属性

名称

类型

必填

说明

refreshing

bool


视图是否应该在刷新时显示指示器。

onRefresh

function


在视图开始刷新时调用。

2.仅支持 iOS 的属性

名称

类型

必填

说明

tintColor

color


指定刷新指示器的颜色

title

string


指定刷新指示器下显示的文字。

titleColor

color


指定刷新指示器下显示的文字的颜色。

3.仅支持 Android 的属性

名称

类型

必填

说明

colors

array of color


指定至少一种颜色用来绘制刷新指示器。

enabled

bool


指定是否要启用刷新指示器。

progressBackgroundColor

color


指定刷新指示器的背景色。

progressViewOffset

number


指定刷新指示器的垂直起始位置

size

enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE)


指定刷新指示器的大小

实例

1. 逻辑代码

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

export default class App extends Component {
constructor(props) {
super(props);
this.state = {
isRefreshing:false,
}
}

_onRefresh() {
this.setState({
isRefreshing: true
});

setTimeout(() => {
this.setState({
isRefreshing: false
//加载数据
})
}, 5000);
}
render() {
return (
<View style={styles.container}>
<ScrollView
refreshControl={
<RefreshControl
refreshing={this.state.isRefreshing}
onRefresh={this._onRefresh.bind(this)}
colors={['red', 'blue', 'green']}
progressBackgroundColor='#ffff00'
enabled={true}
/>
}
>
<Text>显示数据</Text>
</ScrollView>
</View>
)
}
}

const styles = StyleSheet.create({

container: {
flex: 1,
},

});

2. 效果图
【Kevin Learn React Native】--> RefreshControl_数据


举报

相关推荐

0 条评论