案例:
SwipeableFlatList主要实现代码:
<SwipeableFlatList
data={this.state.dataArray}
renderItem={(data) => this.renderItemView(data)}
//侧滑删除
renderQuickActions={() => this.quickActions()}
maxSwipeDistance={100}
bounceFirstRowOnMount={false} //关闭自动回去
/>
//侧滑删除
quickActions() {
return <View style={styles.quickActions}>
<TouchableHighlight
onPress={() => {
alert("确定删除?")
}}>
<View style={styles.quick}>
<Text style={styles.text}>删除</Text>
</View>
</TouchableHighlight>
</View>
}
}
quickActions: {
flex: 1,
marginTop: 15,
flexDirection: "row",
justifyContent: "flex-end",
marginRight: 15,
marginBottom: 15
},
quick: {
backgroundColor: "red",
flex: 1,
alignItems: "flex-end",
justifyContent: "center",
padding: 10,
width: 200
}
完整代码
import React, {Component} from 'react';
import {
StyleSheet,
FlatList,
SwipeableFlatList,
SectionList,
Text,
View,
RefreshControl,
ActivityIndicator,
TouchableHighlight
} from "react-native";
const CITY_NAMES = ["北京", "上海", "广州", "深圳", "成都", "武汉", "南京", "杭州", "梅州", "中山", "东莞"];
type Props = {};
export default class App extends Component<Props> {
constructor(props) {
super(props);
this.state = {
isLoading: false, //默认没有下拉刷新
dataArray: CITY_NAMES //默认数据
}
}
render() {
return (
<View style={styles.container}>
<SwipeableFlatList
data={this.state.dataArray}
renderItem={(data) => this.renderItemView(data)}
//设置下拉刷新
refreshControl={
<RefreshControl
title={"Loading"} //android中设置无效
colors={["red"]} //android
tintColor={"red"} //ios
titleColor={"red"}
refreshing={this.state.isLoading}
onRefresh={() => {
this.loadData(); //下拉刷新加载数据
}}
/>
}
//设置上拉加载
ListFooterComponent={() => this.renderLoadMoreView()}
onEndReached={() => this.loadMoreData()}
//侧滑删除
renderQuickActions={() => this.quickActions()}
maxSwipeDistance={100}
bounceFirstRowOnMount={false} //关闭自动回去
/>
</View>
);
}
//条目布局
renderItemView(data) {
return <View style={styles.item}>
<Text style={styles.text}>{data.item}</Text>
</View>
}
//下拉刷新数据
loadData() {
this.setState({
isLoading: true
})
//模拟网络请求
setTimeout(() => {
//把数据反转
let newArray = [];
for (let i = this.state.dataArray.length - 1; i >= 0; i--) {
newArray.push(this.state.dataArray[i]);
}
this.setState({
isLoading: false,
dataArray: newArray
})
}, 3000);
}
//上拉加载布局
renderLoadMoreView() {
return <View style={styles.loadMore}>
<ActivityIndicator
style={styles.indicator}
size={"large"}
color={"red"}
animating={true}
/>
<Text>正在加载更多</Text>
</View>
}
//上拉加载更多数据
loadMoreData() {
//模拟网络请求
setTimeout(() => {
let newArray = [];
for (let i = this.state.dataArray.length - 1; i >= 0; i--) {
newArray = this.state.dataArray.concat(CITY_NAMES)
}
this.setState({
dataArray: newArray
})
}, 3000);
}
//侧滑删除
quickActions() {
return <View style={styles.quickActions}>
<TouchableHighlight
onPress={() => {
alert("确定删除?")
}}>
<View style={styles.quick}>
<Text style={styles.text}>删除</Text>
</View>
</TouchableHighlight>
</View>
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
item: {
backgroundColor: "#169",
height: 100,
margin: 15,
justifyContent: "center",
alignItems: "center"
},
text: {
color: "white",
fontSize: 20,
},
loadMore: {
alignItems: "center"
},
indicator: {
color: "red",
margin: 10
},
quickActions: {
flex: 1,
marginTop: 15,
flexDirection: "row",
justifyContent: "flex-end",
marginRight: 15,
marginBottom: 15
},
quick: {
backgroundColor: "red",
flex: 1,
alignItems: "flex-end",
justifyContent: "center",
padding: 10,
width: 200
}
});