React Native 之FlatList 下拉刷新和上拉加载更多
接上一篇代码: 只修改了FlatListDemo.js里面的代码
import React, {Fragment,Component} from 'react'; import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, FlatList, RefreshControl, ActivityIndicator, ListFooterComponent, } from 'react-native'; const CITY_NAME = ['北京','上海','广州','武汉','杭州','三亚','宁波','杭州','合肥','芜湖','福州','厦门','温州']; export default class MyPointPage extends Component { constructor(props){ super(props); this.state={ isLoading:false, dataArray: CITY_NAME } } loadData(refreshing){ console.log('loadData=========') if (refreshing) { this.setState({ isLoading:true }); } setTimeout(()=>{ let dataArray = []; if (refreshing) { for(let i = this.state.dataArray.length-1;i>=0;i--){ dataArray.push(this.state.dataArray[i]); } } else { dataArray=this.state.dataArray.concat(CITY_NAME); } this.setState({ dataArray:dataArray, isLoading:false }) },2000); } genIndicator(){ return <View style={styles.indicatorContainer}> <ActivityIndicator style={styles.indicator} size={'large'} animating={true} /> <Text>正在加载更多</Text> </View> } _renderItem(data){ return <View style={styles.item}> <Text style={styles.text}>{data.item}</Text> </View> } render(){ return ( <View> <FlatList data={this.state.dataArray} renderItem={(data)=>this._renderItem(data)} // refreshing={this.state.isLoading} // onRefresh={()=>{ // this.loadData(); // }} //要定制刷新外观不能用上面这个,要用下面这个 refreshControl = { <RefreshControl title={'加载中...'} colors={['red']}//此颜色无效 tintColor={'orange'} titleColor={'red'}//只有ios有效 refreshing={this.state.isLoading} onRefresh={()=>{ this.loadData(true); }} /> } ListFooterComponent={()=>this.genIndicator()}//上拉加载更多视图 onEndReached={()=>{ this.loadData() }} onEndReachedThreshold={0.1} // 这个属性的意思是 当滑动到距离列表内容底部不足 0.1*列表内容高度时触发onEndReached函数 为啥要加这个属性 因为不加的话滑动一点点就会立即触发onReached函数,看不到菊花加载中 /> </View> ); } } const styles = StyleSheet.create({ container:{ flex:1, alignItems:'center', backgroundColor: '#F5FCFF' }, item:{ backgroundColor: '#168', height:200, marginRight:15, marginLeft:15, marginBottom:15, alignItems:'center', //justifyContetnt:'center', }, text:{ color:'white', fontSize:20, }, indicatorContainer:{ alignItems:'center' }, indicator:{ color:'red', margin:10 } })
import React, {Fragment,Component} from 'react'; import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, FlatList, RefreshControl, ActivityIndicator, ListFooterComponent, } from 'react-native'; const CITY_NAME = ['北京','上海','广州','武汉','杭州','三亚','宁波','杭州','合肥','芜湖','福州','厦门','温州']; export default class FlatListDemo extends Component { constructor(props){ super(props); this.state={ isLoading:false, dataArray: CITY_NAME } } loadData(refreshing){ if (refreshing) { this.setState({ isLoading:true }); } setTimeout(()=>{ let dataArray = []; if (refreshing) { for(let i = this.state.dataArray.length-1;i>=0;i--){ dataArray.push(this.state.dataArray[i]); } } else { dataArray=this.state.dataArray.concat(CITY_NAME); } this.setState({ dataArray:dataArray, isLoading:false }) },2000); } genIndicator(){ return <View style={styles.indicatorContainer}> <ActivityIndicator style={styles.indicator} size={'large'} animating={true} /> <Text>正在加载更多</Text> </View> } _renderItem(data){ return <View style={styles.item}> <Text style={styles.text}>{data.item}</Text> </View> } render(){ return ( <View> <FlatList data={this.state.dataArray} renderItem={(data)=>this._renderItem(data)} // refreshing={this.state.isLoading} // onRefresh={()=>{ // this.loadData(); // }} //要定制刷新外观不能用上面这个,要用下面这个 refreshControl = { <RefreshControl title={'加载中...'} colors={['red']}//此颜色无效 tintColor={'orange'} titleColor={'red'}//只有ios有效 refreshing={this.state.isLoading} onRefresh={()=>{ this.loadData(true); }} /> } ListFooterComponent={()=>this.genIndicator()}//上拉加载更多视图 onEndReached={()=>{ this.loadData() }} /> </View> ); } } const styles = StyleSheet.create({ container:{ flex:1, alignItems:'center', backgroundColor: '#F5FCFF' }, item:{ backgroundColor: '#168', height:200, marginRight:15, marginLeft:15, marginBottom:15, alignItems:'center', //justifyContetnt:'center', }, text:{ color:'white', fontSize:20, }, indicatorContainer:{ alignItems:'center' }, indicator:{ color:'red', margin:10 } })
效果图:
此文仅为鄙人学习笔记之用,朋友你来了,如有不明白或者建议又或者想给我指点一二,请私信我。liuw_flexi@163.com/QQ群:582039935.
我的gitHub: (学习代码都在gitHub)
https://github.com/nwgdegitHub/