React Native开发之——组件RefreshControl

前言

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

组件RefreshControl

属性

• onRefresh function:在视图开始刷新时调用。
• refreshing bool:视图是否应该在刷新时显示指示器。
• colors(Android) [ColorPropType]:指定至少一种颜色用来绘制刷新指示器。
• enabled(Android) bool:指定是否要开启刷新指示器。
• progressBackgroundColor(Android) ColorPropType:指定刷新指示器的背景色。
• size RefreshLayoutConsts.SIZE.DEFAULT:指定刷新指示器的大小，具体数值可参阅RefreshControl.SIZE.
• progressViewOffset(Android) React.PropTypes.number：指定刷新指示器的垂直起始位置(top offset)。
• tintColor(IOS) ColorPropType ：指定刷新指示器的颜色。
• title(IOS) string ：指定刷新指示器下显示的文字。

代码实例

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

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

	_onRefresh() 
	{
    	this.setState({isRefreshing: true});
    	setTimeout(()=>
		{
        	this.setState({isRefreshing: false});
       	 //加载数据
    	},2000)
	}

	render() 
	{
    	return 
		(
        	<View style={styles.contain}>
            	<ScrollView
                refreshControl={
                    <RefreshControl
                        refreshing={this.state.isRefreshing}
                        onRefresh={this._onRefresh.bind(this)}
                        tintColor="#ff0000"
                        title="Loading..."
                        titleColor="#00ff00"
                        colors={['#ff0000', '#00ff00', '#0000ff']}
                        progressBackgroundColor="#ffff00"/>
                	}>
                	<Text>显示数据</Text>
            	</ScrollView>
       	 </View>
    	);
	}
}

const styles = StyleSheet.create(
{
	contain: {flex: 1,},
});

效果图

其他

参考：Github下载