zoukankan      html  css  js  c++  java
  • 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}
                    />
                );
            }
    
        }
  • 相关阅读:
    1-4 Autolayout
    1-3 UIScrollView
    lua 的语法糖
    javascript文档
    cocos2d 图片模糊
    a*寻路分析
    class按传递时分析
    mac 不再接受预览版提示
    OS X 10.11 El Capitan 三指拖动的开启方法
    mac系统卸载mono
  • 原文地址:https://www.cnblogs.com/lijianyi/p/11492128.html
Copyright © 2011-2022 走看看