内容简介:npm i react-native-bsrefresh-list-viewnpm i
- 这是一个支持自定义的下拉刷新组件
- 这是一个支持自定义的上拉加载更多的组件
- 这是一个基于FlatList,SectionList组件。支持两者的可选配置
效果
gitHub地址: github.com/FreeBaiShun…npm集成
npm i react-native-bsrefresh-list-view
npm i
用法
import React, {Component} from 'react'; import RequestManager from '../network/RequestManager'; import config from '../network/NetworkConfig'; import RefreshListView, { RefreshState } from 'react-native-bsrefresh-list-view' import { Platform, View, Text, Image, Button, FlatList, } from 'react-native' import Case from './Case' var pageCur = 1; var arrMList = []; export default class Home extends Component { _flatList; static navigationOptions = ({navigation}) => { return { headerStyle:{ backgroundColor: 'red', }, headerTitle: ( <Text style={{color:'red'}}> 首页 </Text> ) }; } state = { dataFlatList:[], refreshState: RefreshState.Idle, } _renderItem = (item) => { var dictCur = item.item; var txt = dictCur.title + '---' + dictCur.content; return( <View style = {{height: 50.0}}> <Text> {txt} </Text> </View> ) } _keyExtractor = (item, index) => { return index; } render() { return ( <View> <RefreshListView //FlatList componentName = {'FlatList'} data = {this.state.dataFlatList} //SectionList //componentName = {'SectionList'} //sections = {this.state.dataFlatList} renderItem = {this._renderItem} refreshState={this.state.refreshState} onHeaderRefresh={this.onHeaderRefresh} onFooterRefresh={this.onFooterRefresh} keyExtractor={this._keyExtractor} // 可选 footerRefreshingText='玩命加载中 >.<' footerFailureText='我擦嘞,居然失败了 =.=!' footerNoMoreDataText='-我是有底线的-' footerEmptyDataText='-好像什么东西都没有-' > </RefreshListView> </View> ) } componentDidMount() { this.onHeaderRefresh(); } //请求数据 fetchData(page,callback){ RequestManager.get(config.api.getText, { page:page, count:50, },(json,error) => { if(error){ if(callback){ callback(null,error); } }else{ if(page == 1){ pageCur = 1; arrMList = []; } arrMList = arrMList.concat(json.result); if(callback){ callback(arrMList,null); } } }); } onHeaderRefresh = () => { this.setState({ refreshState: RefreshState.HeaderRefreshing }); this.fetchData(1,(arr, error) => { if(error){ this.setState({ refreshState: RefreshState.Failure }); }else{ this.setState({ dataFlatList: arr, refreshState: arr.length < 1 ? RefreshState.EmptyData : RefreshState.Idle, }) } }); } onFooterRefresh = () => { pageCur++; console.log('pageCur = ' + pageCur); this.setState({ refreshState: RefreshState.FooterRefreshing }) this.fetchData(pageCur,(arr, error) => { if(error){ this.setState({ refreshState: RefreshState.Failure }); }else{ this.setState({ dataFlatList: arr, refreshState: (arr.length%50 != 0) ? RefreshState.NoMoreData : RefreshState.Idle, }) } }); } } 复制代码
该Demo启动
- 在react-native路径下执行
$ npm i 复制代码
- 在ios路径下执行
$ pod install 复制代码
- 在node_modules路径下执行(启服)
$ npm start 复制代码
- 运行 用xcode打开BottomTest.xcworkspace工程文件运行即可
以上所述就是小编给大家介绍的《react-native-bsrefresh-list-view实现拉动刷新》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- React项目实战(三)尝试实现一个拉动刷新组件
- 航班安全牵动人心,机场拉动智慧安防市场需求
- Swift iOS : 上拉刷新或者下拉刷新
- Swift iOS : 上拉刷新或者下拉刷新
- 优雅地刷新RecyclerView
- 上拉加载 下拉刷新
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
互联网创业核心技术:构建可伸缩的web应用
【美】Artur Ejsmont / 李智慧、何坤 / 电子工业出版社 / 2016-12 / 89
可伸缩架构技术是所有互联网技术中最重要,也是最引人入胜的技术。《互联网创业核心技术:构建可伸缩的web应用》针对互联网创业需求快速迭代,业务快速发展,短时间内用户、数据、访问量激增的特点,提纲挈领地描述了伸缩性架构的基本原理与设计原则,详细阐述了Web应用前端层、服务层、数据层的可伸缩架构,并花大量篇幅讲述了缓存技术和异步处理技术的可伸缩设计及其在Web系统中的具体应用。 《互联网创业核心技......一起来看看 《互联网创业核心技术:构建可伸缩的web应用》 这本书的介绍吧!