React Native：侧滑删除组件SwipeableFlatList

案例：

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

    }
});

原址链接