React Native：侧滑删除组件SwipeableFlatList

比眉伴天荒 2022-10-14 01:00 65阅读 0赞

案例：

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
    
        }
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY2MzI2NA_size_16_color_FFFFFF_t_70_pic_center]

[原址链接][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTY2MzI2NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221014/284738995a4a46f2b264f4155747c80e.png
[Link 1]: https://www.pianshen.com/article/5013409407/