React-Native带你一步一步实现侧滑删除

前言：好久没有写博客了，回想起刚开始写博客的时候对自己的要求，“每周至少一篇！！！“（还有当初说减肥跟写博客同步进行，结果越减越肥。），嗯嗯，说多了都是泪，最近在一直在学习h5，然后看到现在rn项目中有小伙伴在用一个第三方的侧滑删除控件，于是想去看看那些大神是咋实现的，最后发现，也就这样哈～没想象中的那么难，写这篇博客的目的也就是当作一个学习笔记，大牛勿喷！！2017对我来说是不平凡的一年，期间换了几次工作，但最后还是找到了自己的归宿，所以对2017还是比较满意的，感恩！！2018迎来了又一个本命年，回头想想自己，其实也不小了，但心里却总是对自己说：“我还是一个小鲜肉！“，唉唉！感叹时光的流逝，身边的亲人一个一个离去，有些时候一个人发呆的时候总问自己“你到底想做什么？你能做什么？“我却被自己问的哑口无言，骚年！现实点吧～ 也请对自己和身边的人好一点，坚持自己的初衷，永远不要做思想的巨人行动的矮子，嗯嗯！说了那么多废话，想必大家也觉得我无聊，管你们无不无聊！我开心就行，哈哈哈哈～～～

最后实现的效果呢也很简单，大概是这样的：

先说一下我们的大体思路，很简单！底部绝对定位放一个默认的（含有“删除“按钮）的view，然后上面盖住一个默认的需要渲染的view，给整个item一个滑动监听，然后慢慢的漏出底部view，嗯嗯！！ 原理真的很简单，下面我们一步一步的撸我们的代码哈～

首先新建一个很干净的项目叫SwipeDemo然后跑起来:

照着我们的思路简单实现一下，代码很简单，我直接贴出来了：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    TouchableOpacity
} from 'react-native';

export default class App extends Component {
   
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.swipeContainer}>
                    {
  /*绝对在底部的view*/}
                    <View style={styles.swipeActions}>
                        <TouchableOpacity
                            style={styles.delTextContainer}
                            onPress={()=>{
                                alert('ss');
                            }}
                        >
                            <Text
                                style={styles.deleteTextStyle}
                            >删除</Text>
                        </TouchableOpacity>
                    </View>
                    {
  /*内容content*/}
                    <View style={styles.content}>
                        <Text>我是item的内容</Text>
                    </View>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    swipeContainer: {
        width: '100%',
        marginTop: 100,
        height:100,
    },
    swipeActions:{
        backgroundColor: 'grey',
        width: '100%',
        overflow:'hidden',
        ...StyleSheet.absoluteFillObject,
        flexDirection:'row',
        justifyContent:'flex-end'
    },
    delTextContainer:{
        width:100,
        backgroundColor:'red',
        alignItems:'center',
        justifyContent:'center'
    },
    deleteTextStyle:{
        color:'#fff',
    },
    content:{
        width: '100%',
        flex:1,
        backgroundColor:'yellow',
        justifyContent:'center',
        alignItems:'center',
    }
});

运行代码：

然后我们给内容content一个向左的偏移量：

 render() {
        return (
            <View style={styles.container}>
                <View style={styles.swipeContainer}>
                    {/*绝对在底部的view*/}
                    <View style={styles.swipeActions}>
                        <TouchableOpacity
                            style={styles.delTextContainer}
                            onPress={()=>{
                                alert('ss');
                            }}
                        >
                            <Text
                                style=