SwipeableFlatList

react-native 側滑組件SwipeableFlatList 單項側滑解決

作過移動開發的同窗都應該清楚，側滑刪除是移動開發中的一個常見功能。在官方沒提供側滑組件以前，要實現側滑效果須要使用第三方庫，如react-native-swipe-list-view。不過隨着React Native 0.50版本的發佈，系統新添加SwipeableFlatList組件，SwipeableFlatList是在FlatList基礎上實現的側滑顯示菜單的功能，大大的方便了開發。

SwipeableFlatList支持FlatList的全部的屬性和方法，另外它還有三個本身的屬性，在使用SwipeableFlatList實現側滑效果時須要處理這三個屬性。

• bounceFirstRowOnMount: bool 是一個bool屬性，默認是YES，表示第一次是否先滑一下FlatList的Item；
• maxSwipeDistance: number 或者 func， 必需要賦值，表示向左滑動的最大距離
• renderQuickActions：func，必需要賦值，表示滑動顯示的內容。

下面讓咱們實現一個簡單的側滑刪除的實例，其效果以下：

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

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

const CITY_NAMES = ['北京', '上海', '廣州', '杭州', '蘇州'];
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <SwipeableFlatList
          //1數據的獲取和渲染
          data={CITY_NAMES}
          renderItem={(data) => <View style={styles.item}>
            <Text style={styles.text}>{data.item}</Text>
          </View>}

          //2建立側滑菜單
          renderQuickActions={() => this.getQuickActions()}//建立側滑菜單
          maxSwipeDistance={80}//可展開（滑動）的距離
          bounceFirstRowOnMount={false}//進去的時候不展現側滑效果
        />
      </View>
    );
  }
  //側滑菜單渲染
  getQuickActions = () => {
    return <View style={styles.quickAContent}>
      <TouchableHighlight
        onPress={() => alert("確認刪除？")}
      >
        <View style={styles.quick}>
          <Text style={styles.delete}>刪除</Text>
        </View>
      </TouchableHighlight>
    </View>
  };
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    backgroundColor: '#aeffb1',
    height: 100,
    marginRight: 15,
    marginLeft: 15,
    marginBottom: 10,
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 5,//漂浮的效果
    borderRadius: 5,//圓角
  },
  text: {
    color: '#444444',
    fontSize: 20,
  },
  //側滑菜單的樣式
  quickAContent: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    marginRight: 15,
    marginBottom: 10,
  },
  quick: {
    backgroundColor: "#ff1d49",
    flex: 1,
    alignItems: 'flex-end',//水平靠右
    justifyContent: 'center',//上下居中
    width: 100,
    borderRadius: 5,
    elevation: 5,//漂浮的效果

  },
  delete: {
    color: "#d8fffa",
    marginRight: 30
  }
});