React Native 之侧滑删除

前言

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

但是经过多个三方的测试实验，很多侧滑删除都不尽如人意，要么是列表每个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(
            <View style = {styles.container}>
                <SwipeableFlat
                    data = {[
                        {title : '1'},
                        {title : '2'},
                        {title : '3'},
                        {title : '4'},
                        {title : '5'},
                    ]}
                    renderItem = {this._renderItem1.bind(this)}
                    maxSwipeDistance = {100}
                    renderQuickActions = {this._getQuickActions.bind(this)} />
            </View>
        );
    };

    _renderItem1({item}) {
        return(
            <View>
                <View style = {styles.content}>
                    <Text>我是item {item.title}</Text>
                </View>
            </View>
        );
    }

    _getQuickActions() {
        return(
            <View style = {styles.quickAContent}>
                <TouchableOpacity
                    onPress = {() => {
                        Alert.alert('确定要删除吗?');
                    }} >
                    <View style = {styles.quick}>
                        <Text style = {styles.delete}>删除</Text>
                    </View>
                </TouchableOpacity>
            </View>
        );
    }

后话

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

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