ReactNative进阶（十七）：RefreshControl组件实现刷新效果

一、简介

刷新功能在数据更新的时候很常用，它对用户有一个非常明显的数据正在更新的提示信息。ReactNative中提供了RefreshControl组件来实现这个刷新功能。

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

二、API

它是跨平台的组件，提供的属性如下：

//视图下拉开始刷新时调用。

• onRefresh: React.PropTypes.func

//该视图是否应指示活动刷新。

• refreshing: React.PropTypes.bool.isRequired

//刷新指示器的颜色。@platform ios

• tintColor: ColorPropType

//刷新文案的颜色。@platform ios

• titleColor: ColorPropType

//标题显示在刷新指示器下方。@platform ios

• title: React.PropTypes.string

//是否启用拉动刷新功能。@platform android

• enabled: React.PropTypes.bool

//用于绘制刷新指示器的颜色（至少一种）。@platform android colors:

• React.PropTypes.arrayOf(ColorPropType)

//刷新指示器的背景色。@platform android

• progressBackgroundColor: ColorPropType

//刷新指示器的大小，请参见RefreshControl.SIZE。@platform android size:

• React.PropTypes.oneOf([RefreshLayoutConsts.SIZE.DEFAULT,RefreshLayoutConsts.SIZE.LARGE])

//进度视图顶部偏移。@platform android

• progressViewOffset:React.PropTypes.number

三、应用示例

了解了api，简单示例如下：

ScrollRefreshControl.js

import React, { Component } from 'react';

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

export default class ScrollRefreshControl extends Component{ //state数据 state = { text: '初始状态', refreshing: false }; //下拉视图开始刷新时调用 _onRefresh() { if (this.state.refreshing === false) { this._updateState('正在刷新......', true); //5秒后结束刷新 setTimeout( ()=>{ this._updateState('结束状态', false) }, 5000) } } //更新State _updateState(message, refresh){ this.setState({text:message,refreshing: refresh}); } render(){ return ( <ScrollView style={[styles.flex,styles.bgColor]} contentContainerStyle={{flex: 1, alignItems: 'center',justifyContent: 'center'}} indicatorStyle={'black'} showsHorizontalScrollIndicator={true} bounces={true} refreshControl={ <RefreshControl tintColor={'red'} titleColor={'brown'} title={'正在刷新......'} refreshing={this.state.refreshing} onRefresh={this._onRefresh.bind(this)} /> } > <Text>{this.state.text}</Text> </ScrollView> ) }
}

const styles = StyleSheet.create({ flex: { flex: 1 }, bgColor: { backgroundColor:'#EEE' }
});

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
  
38
  
39
  
40
  
41
  
42
  
43
  
44
  
45
  
46
  
47
  
48
  
49
  
50
  
51
  
52
  
53
  
54
  
55
  
56
  
57
  
58
  
59
  
60
  
61
  
62
  
63
  
64
  
65
 

index.ios.js/index.android.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';

import { AppRegistry, StyleSheet, View
} from 'react-native';
import ScrollRefreshControl from "./src/ScrollRefreshControl";


export default class ReactNativeDemo extends Component { render() { return ( <View style={[styles.flex,styles.bgColor]}> <ScrollRefreshControl/> </View> ); }
}

const styles = StyleSheet.create({ flex: { flex: 1 }, bgColor: { backgroundColor: 'white' }
});

AppRegistry.registerComponent('ReactNativeDemo', () => ReactNativeDemo);

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
  
31
  
32
  
33
  
34
  
35
  
36
  
37
 

文章来源: blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/sunhuaqiang1/article/details/116587417