import React, { Component } from "react";
import {
FlatList,
RefreshControl,
StyleSheet,
Text,
View,
ActivityIndicator,
SwipeableFlatList,
TouchableHighlight,
} from "react-native";
const CITY_NAMES = [
"河北省石家庄市",
"河北省唐山市",
"山西省太原市",
"内蒙包头市",
"辽宁省大连市",
"黑龙江省齐齐哈尔市",
"江苏省徐州市",
"浙江省杭州市",
"福建省福州市",
"江西省南昌市",
"山东省济南市",
"山东省青岛市",
"甘肃省兰州市",
"新疆乌鲁木齐市"
];
export default class SwipeableFlatListDemo extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: false,
dataArray: CITY_NAMES
};
}
_renderItem(data) {
return (
<View style={styles.item}>
<Text style={styles.text}>{data.item}</Text>
</View>
);
}
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_NAMES);
}
this.setState({
dataArray: dataArray,
isLoading: false
});
}, 1000);
}
genIndicator() {
return <View style={styles.indicatorContainer}>
<ActivityIndicator
style={styles.indicator}
size={"large"}
animating={true}
/>
<Text>正在加载更多</Text>
</View>
}
genQuickActions(){
return <View style={styles.quickContainer}>
<TouchableHighlight
onPress={()=>{
alert('Delete?');
}}
>
<View style={styles.quick}>
<Text style={styles.text}>Delete</Text>
</View>
</TouchableHighlight>
</View>
}
render() {
return (
<View style={styles.container}>
<SwipeableFlatList
data={this.state.dataArray}
renderItem={data => this._renderItem(data)}
refreshControl={
<RefreshControl
title={"Loading"}
colors={["red"]}
tintColor={["blue"]}
refreshing={this.state.isLoading}
onRefresh={() => {
this.loadData(true);
}}
/>
}
ListFooterComponent={() => this.genIndicator()}
onEndReached={()=>this.loadData()}
renderQuickActions={()=>this.genQuickActions()}
maxSwipeDistance={100}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1
},
item: {
backgroundColor: "#169",
height: 100,
marginRight: 15,
marginLeft: 15,
marginBottom: 15,
alignItems: "center",
justifyContent: "center"
},
text: {
color: "white",
fontSize: 20
},
indicatorContainer: {
alignItems: "center"
},
indicator: {
color: "red",
margin: 10
},
quickContainer:{
flex:1,
flexDirection:"row",
justifyContent:'flex-end',
marginRight:15,
marginBottom:15,
},
quick:{
backgroundColor:'red',
flex:1,
alignItems:'flex-end',
justifyContent: 'center',
padding:10,
width:200,
}
});
转载于:https://www.cnblogs.com/YooHoeh/p/9300944.html