React Native 之侧滑删除

前言

项目需求中需要使用到侧滑删除的功能,但是项目整体使用的都是React Native,在RN提供的组件中的FlatListSectionList都没有提供侧滑删除的功能选项,无奈之下,只能使用三方的了。

但是经过多个三方的测试实验,很多侧滑删除都不尽如人意,要么是列表每个item都能够侧滑显示删除按钮(不能控制在Scrollview滑动或者其他item滑动的时候自动闭合),要么就是卡顿非常明显。

经过多方查找发现React Native本身就封装的有侧滑删除的功能,只不过没有对外开放。

正文

React Native本身封装的侧滑删除位置在下面这个路径下:

./node_modules/react-native/Libraries/Experimental/SwipeableRow/SwipeableFlatList

单纯的看文件目录,从文件命名来看,也能看的出来封装是从下往上的,从最开始的item封装在SwipeableRow.js文件下,到最后集成自FlatList的最终文件SwipeableFlatList.js

文件目录

挨个打开文件看了看,哎。。。我实在是看不大懂,只有偶尔部分能够懂那么点。

不过如果单纯的使用的话,仅仅看一下最终的封装文件就差不多了。

具体使用

效果图:

效果图

部分代码如下:

import SwipeableFlat from '../node_modules/react-native/Libraries/Experimental/SwipeableRow/SwipeableFlatList';

render() {
        return(
            
                
            
        );
    };

    _renderItem1({item}) {
        return(
            
                
                    我是item {item.title}
                
            
        );
    }

    _getQuickActions() {
        return(
            
                 {
                        Alert.alert('确定要删除吗?');
                    }} >
                    
                        删除
                    
                
            
        );
    }

后话

关于三方的这些东西使用倒是很简单,尤其是官方封装的,代码层次很多都是我们值得学习的,想要提高自己的编码水平以及技术(不限于React Native),那就多多的看大神的封装代码,学习其优点,不仅可以巩固自己的基础知识,还能提高自己的编码水平。

多拿别人封装好的代码来研究分析

你可能感兴趣的:(React Native 之侧滑删除)