RefreshControl
来源:互联网 发布:抓包后怎么看mac地址 编辑:程序博客网 时间:2024/05/16 03:03
这一组件可以用在ScrollView或ListView内部,为其添加下拉刷新的功能。当ScrollView处于竖直方向的起点位置(scrollY: 0),此时下拉会触发一个onRefresh
事件。
属性
onRefresh function
在视图开始刷新时调用。
refreshing bool
视图是否应该在刷新时显示指示器。
androidcolors [ColorPropType]
指定至少一种颜色用来绘制刷新指示器。
androidenabled bool
指定是否要开启刷新指示器。
androidprogressBackgroundColor ColorPropType
指定刷新指示器的背景色。
androidsize RefreshLayoutConsts.SIZE.DEFAULT
指定刷新指示器的大小,具体数值可参阅RefreshControl.SIZE.
androidprogressViewOffset React.PropTypes.number
指定刷新指示器的垂直起始位置(top offset)。
iostintColor ColorPropType
指定刷新指示器的颜色。
iostitle string
指定刷新指示器下显示的文字。
例子
'use strict';const React = require('react');const ReactNative = require('react-native');const { ScrollView, StyleSheet, RefreshControl, Text, TouchableWithoutFeedback, View,} = ReactNative;const styles = StyleSheet.create({ row: { borderColor: 'grey', borderWidth: 1, padding: 20, backgroundColor: '#3a5795', margin: 5, }, text: { alignSelf: 'center', color: '#fff', }, scrollview: { flex: 1, },});const Row = React.createClass({//每个item的布局 _onClick: function() { this.props.onClick(this.props.data); }, render: function() { return ( <TouchableWithoutFeedback onPress={this._onClick} >/*TouchableWithoutFeedback 点击无响应效果没有任何视觉反馈 只支持一个子节点 多个子组件应该用一个View包装*/ <View style={styles.row}> <Text style={styles.text}> {this.props.data.text + ' (' + this.props.data.clicks + ' clicks)'} </Text> </View> </TouchableWithoutFeedback> ); },});const RefreshControlExample = React.createClass({ statics: { title: '<RefreshControl>', description: 'Adds pull-to-refresh support to a scrollview.' }, getInitialState() { return { isRefreshing: false, loaded: 0, rowData: Array.from(new Array(20)).map( (val, i) => ({text: 'Initial row ' + i, clicks: 0})), }; }, _onClick(row) { row.clicks++; this.setState({ rowData: this.state.rowData, }); }, render() { const rows = this.state.rowData.map((row, ii) => { return <Row key={ii} data={row} onClick={this._onClick}/>; }); return ( <ScrollView style={styles.scrollview} refreshControl={ <RefreshControl refreshing={this.state.isRefreshing}//是否正在刷新 onRefresh={this._onRefresh}//视图开始刷新时调用 tintColor="#ff0000" //刷新指示器的颜色 ios title="Loading..." //刷新指示器下显示的文字 ios titleColor="#00ff00" // ios colors={['#ff0000', '#00ff00', '#0000ff']} // 刷新指示器的绘制颜色至少一种 progressBackgroundColor="#ffff00" //刷新指示器的背景颜色 /> }> {rows} </ScrollView> ); }, _onRefresh() { this.setState({isRefreshing: true}); setTimeout(() => { // prepend 10 items const rowData = Array.from(new Array(10)) .map((val, i) => ({ text: 'Loaded row ' + (+this.state.loaded + i), clicks: 0, })) .concat(this.state.rowData); //concat() 方法将传入的数组或非数组值与原数组合并,组成一个新的数组并返回. this.setState({ loaded: this.state.loaded + 10, isRefreshing: false, rowData: rowData, }); }, 5000); },});module.exports = RefreshControlExample;
0 0
- refreshControl
- RefreshControl
- RN RefreshControl 属性
- iOS - UITableViewController的RefreshControl使用
- react native RefreshControl 使用详解
- iOS10中UIScrollView新增refreshControl属性
- React-Native- RefreshControl && Navigator 使用案例
- 简单实现---下拉刷新 --使用UITableViewController中的refreshControl属性
- react native RefreshControl下拉控件 右上角默认出现小菊花
- react native listview 实现下拉刷新(RefreshControl)
- react native学习笔记12——RefreshControl下拉刷新
- 【React Native开发】React Native控件之RefreshControl组件详解(21)
- React Native学习笔记之--ListView和RefreshControl实现下拉刷新
- cpp11.10
- Retrofit API 中文
- iscroll块遇到原生滑动不能滑
- webpack打包react和过程遇到的问题
- strings命令
- RefreshControl
- 数据结构基础-栈-铁轨uva514
- Array
- c语言中的空指针与野指针
- nodejs - 如何完全更新
- 图解Android Studio导入Eclipse项目源码
- lucene的IndexReader的初始化过程
- 图像卷积与滤波的一些知识点
- 比较实用又不常见的Android API