RN 側滑刪除功能實現

這個單選功能使用的是Ant Design Mobile RN庫中的SwipeAction

實現的，效果如圖

 

話不多講直接上代碼

1、引入import {SwipeAction} from '@ant-design/react-native';

2、直接將要實現側滑刪除功能的控件包裹下，這里使用的是FlatList，所以直接在每個item上添加刪除

private showDel(render: IBaseRenderItem<any>) {
        // 是否刪除
        let authDelete = this.state.data.authDelete
        if (authDelete == 1) {
            return (
                <SwipeAction
                    autoClose
                    style={{ backgroundColor: 'transparent' }}
                    right={[
                        {
                            text: '刪除',
                            onPress: () => {
                                // 刪除邏輯
                                this.setState({ bizParticipantRelationId: render.item.bizParticipantRelationId })
                                this.alertStopCommit.setModalVisible(true)
                            },
                            style: { backgroundColor: 'red', color: 'white' },
                        }]}

                >
                    {/* 自定義控件 */}
                    <BidRoleView
                        titleStr={render.item.participantName}
                        subStr={render.item.companyName + '  ' + render.item.jobTitle}
                        headImg={render.item.headImageUrl}
                        userId={render.item.participantId}
                    />
                </SwipeAction>
            );

        } else {
            return (
                <BidRoleView
                    titleStr={render.item.participantName}
                    subStr={render.item.companyName + '  ' + render.item.jobTitle}
                    headImg={render.item.headImageUrl}
                    userId={render.item.participantId}
                />
            );
        }

    }