SwipeableFlatList 实现类似于QQ列表滑动

import React, { Component } from "react";
import {
  FlatList,
  RefreshControl,
  StyleSheet,
  Text,
  View,
  ActivityIndicator,
  SwipeableFlatList,
  TouchableHighlight,
} from "react-native";

const CITY_NAMES = [
  "河北省石家庄市",
  "河北省唐山市",
  "山西省太原市",
  "内蒙包头市",
  "辽宁省大连市",
  "黑龙江省齐齐哈尔市",
  "江苏省徐州市",
  "浙江省杭州市",
  "福建省福州市",
  "江西省南昌市",
  "山东省济南市",
  "山东省青岛市",
  "甘肃省兰州市",
  "新疆乌鲁木齐市"
];
export default class SwipeableFlatListDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: false,
      dataArray: CITY_NAMES
    };
  }
  _renderItem(data) {
    return (
      <View style={styles.item}>
        <Text style={styles.text}>{data.item}</Text>
      </View>
    );
  }
  loadData(refreshing) {
    if(refreshing){
      this.setState({
        isLoading: true
      });
    }
    setTimeout(() => {
      let dataArray = [];
      if(refreshing){

        for (let i = this.state.dataArray.length - 1; i >= 0; i--) {
          dataArray.push(this.state.dataArray[i]);
        }
      }else{
        dataArray = this.state.dataArray.concat(CITY_NAMES);
      }
      this.setState({
        dataArray: dataArray,
        isLoading: false
      });
    }, 1000);
  }
  genIndicator() {
    return <View style={styles.indicatorContainer}>
        <ActivityIndicator
          style={styles.indicator}
          size={"large"}
          animating={true}
        />
        <Text>正在加载更多</Text>
      </View>
  }
  genQuickActions(){
    return <View style={styles.quickContainer}>
      <TouchableHighlight
        onPress={()=>{
          alert('Delete?');
        }}
      >
        <View style={styles.quick}>
          <Text style={styles.text}>Delete</Text>
        </View>
      </TouchableHighlight>
    </View>
  }
  render() {
    return (
      <View style={styles.container}>
        <SwipeableFlatList
          data={this.state.dataArray}
          renderItem={data => this._renderItem(data)}
          refreshControl={
            <RefreshControl
              title={"Loading"}
              colors={["red"]}
              tintColor={["blue"]}
              refreshing={this.state.isLoading}
              onRefresh={() => {
                this.loadData(true);
              }}
            />
          }
          ListFooterComponent={() => this.genIndicator()}
          onEndReached={()=>this.loadData()}
          renderQuickActions={()=>this.genQuickActions()}
          maxSwipeDistance={100}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  item: {
    backgroundColor: "#169",
    height: 100,
    marginRight: 15,
    marginLeft: 15,
    marginBottom: 15,
    alignItems: "center",
    justifyContent: "center"
  },
  text: {
    color: "white",
    fontSize: 20
  },
  indicatorContainer: {
    alignItems: "center"
  },
  indicator: {
    color: "red",
    margin: 10
  },
  quickContainer:{
    flex:1,
    flexDirection:"row",
    justifyContent:'flex-end',
    marginRight:15,
    marginBottom:15,
  },
  quick:{
    backgroundColor:'red',
    flex:1,
    alignItems:'flex-end',
    justifyContent: 'center',
    padding:10,
    width:200,
  }
});

效果图