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
  }
});

来源：oschina

链接：https://my.oschina.net/u/3495544/blog/3024670

标签

react

React Native

SwipeListView

FLEX

reactjs