react|react native之ScrollView下拉刷新效果 reactnative之ScrollView下拉刷新效

本文实例为大家分享了react native之ScrollView下拉刷新效果的具体代码，供大家参考，具体内容如下
ScrollView的refreshControl属性用于下拉刷新，只能用于垂直视图，即horizontal不能为true。
1.创建自定义CKRefresh.js刷新组件

import React,{Component} from 'react'; import {View,Text,StyleSheet,ScrollView,RefreshControl,Dimensions} from 'react-native'; const screenW=Dimensions.get('window').width; export default class CKRefresh extends Component{constructor(){super(); this.state={rowDataArr:Array.from(new Array(30)).map((value,index)=>({title:'初始化数据'+index})),//是否显示loadingisRefreshing:false,loaded:0}}render(){const rowsArr=this.state.rowDataArr.map((row,index)=>())return(this._onRefresh()}colors={['red','green','blue']}title="正在加载中..."/>}>{rowsArr})}_onRefresh(){//1.显示指示器this.setState({isRefreshing:true}); //2.模拟加载数据setTimeout(()=>{let newDataArr=Array.from(new Array(5)).map((value,index)=>({title:'我是拉下来的数据'+(this.state.loaded+index)})).concat(this.state.rowDataArr); //更新状态机this.setState({rowDataArr:newDataArr,isRefreshing:false,loaded:this.state.loaded+5}); },2000); }}class Row extends Component{static defaultProps={data:{}}; render(){return({this.props.data.title})}}const styles=StyleSheet.create({})

2.在App.js中引用

/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */import React from 'react'; import {SafeAreaView,StyleSheet,ScrollView,View,Text,StatusBar,} from 'react-native'; import {Header,LearnMoreLinks,Colors,DebugInstructions,ReloadInstructions,} from 'react-native/Libraries/NewAppScreen'; import CKRefresh from './components/CKRefresh'; const App: () => React$Node = () => {return (<>); }; const styles=StyleSheet.create({mainViewStyle:{flex:1,backgroundColor:'#fff',}}); export default App;

3.结果如图