React Native学习九- SwipeableFlatList

React-Native 0.50+ 新添加SwipeableFlatList组件，SwipeableFlatList是在FlatList基础上添加了侧滑显示菜单的功能，类似于侧滑删除效果。

它有FlatList所有的属性和方法，另外它还有三个自己的属性：

1. bounceFirstRowOnMount: bool 是一个bool属性，默认是YES，表示第一次是否先滑一下FlatList的Item

2.maxSwipeDistance: number 或者 func， 必须要赋值，表示向左滑动的最大距离

3.renderQuickActions：func，必须要赋值，表示滑动显示的内容

一个最简单的例子：

'use strict';
import React, {Component} from 'react';
import {
  Image,
  SwipeableFlatList,
  TouchableHighlight,
  StyleSheet,
  Text,
  View,
  Alert,
} from 'react-native';

const data = [
  {
    key: 'like',
    icon: require('./Thumbnails/like.png'),
    data: 'Like!',
  },
  {
    key: 'heart',
    icon: require('./Thumbnails/heart.png'),
    data: 'Heart!',
  },
  {
    key: 'party',
    icon: require('./Thumbnails/party.png'),
    data: 'Party!',
  },
];

export default class SwipeableFlatListExample extends Component{
  render() {
    return (
        <SwipeableFlatList
          data={data}
          bounceFirstRowOnMount={true}
          maxSwipeDistance={160}
          renderItem={this._renderItem.bind(this)}
          renderQuickActions={this._renderQuickActions.bind(this)}
        />
    );
  },

  _renderItem({item}) {
    return (
      <View style={styles.row}>
        <Image style={styles.rowIcon} source={item.icon} />
        <View style={styles.rowData}>
          <Text style={styles.rowDataText}>{item.data}</Text>
        </View>
      </View>
    );
  },

  _renderQuickActions({item}) {
    return (
      <View style={styles.actionsContainer}>
        <TouchableHighlight
          style={styles.actionButton}
          onPress={() => {
            Alert.alert(
              'Tips',
              'You could do something with this edit action!',
            );
          }}>
          <Text style={styles.actionButtonText}>Edit</Text>
        </TouchableHighlight>
        <TouchableHighlight
          style={[styles.actionButton, styles.actionButtonDestructive]}
          onPress={() => {
            Alert.alert(
              'Tips',
              'You could do something with this remove action!',
            );
          }}>
          <Text style={styles.actionButtonText}>Remove</Text>
        </TouchableHighlight>
      </View>
    );
  },
}

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    padding: 10,
    backgroundColor: '#F6F6F6',
  },
  rowIcon: {
    width: 64,
    height: 64,
    marginRight: 20,
  },
  rowData: {
    flex: 1,
  },
  rowDataText: {
    fontSize: 24,
  },
  actionsContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  actionButton: {
    padding: 10,
    width: 80,
    backgroundColor: '#999999',
  },
  actionButtonDestructive: {
    backgroundColor: '#FF0000',
  },
  actionButtonText: {
    textAlign: 'center',
  },
});