react-native 侧滑组件 react-native-swipe-list-view

一。由于项目需要支持左滑&右滑的list组件，所以上网看了一下，发现了 react-native-swipe-list-view 觉得不错，分享给大家。（1）.此库支持单个组件的左滑右滑，也支持list组件的左滑右滑首先看一下效果图：1.支持左滑和右滑，2.支持设置禁止左滑和右滑。3.list组件支持点击其他item时关闭当前item左滑/右滑等等。二。使用1. 安装npm install --save react-native-swipe-list-view或yarn add react-native-swipe-list-view

2.使用

/*** Created by zhuoyuan93@gmail.com on 2017/7/2.*/import React from 'react';import {View,Text,ListView,StyleSheet,TouchableOpacity} from 'react-native';import {SwipeListView, SwipeRow} from 'react-native-swipe-list-view';export default class Item extends React.PureComponent {render() {const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});const dataSource = ['a', 'b', 'c'];return (<View style={styles.outView}><SwipeRowleftOpenValue={75}rightOpenValue={-75}disableRightSwipe={true}   //禁止向右滑动><View style={styles.rowBack}><Text allowFontScaling={false}>加入</Text><Text allowFontScaling={false}>购物车</Text></View><View style={{alignItems: 'center', backgroundColor: '#CCC', height: 50, justifyContent: 'center'}}><Text>I am a standalone SwipeRow</Text></View></SwipeRow><View style={{height: 20}}/><SwipeListViewdataSource={ds.cloneWithRows(dataSource)}renderRow={ data => (<View style={styles.rowFront}><Text>I am {data} in a SwipeListView</Text></View>)}renderHiddenRow={ data => (<View style={styles.rowBack}><TouchableOpacity onPress={() => alert('left')}><View style={styles.leftView}><Text style={{backgroundColor: 'red'}}>Left</Text></View></TouchableOpacity><View style={styles.leftView}><Text style={{backgroundColor: 'red'}}>Right</Text></View></View>)}leftOpenValue={75}rightOpenValue={-75}/></View>)}}const styles = StyleSheet.create({outView: {flex: 1,marginTop: 22},rowBack: {alignItems: 'center',backgroundColor: '#DDD',flexDirection: 'row',justifyContent: 'space-between',flex: 1},rowFront: {alignItems: 'center',backgroundColor: '#CCC',borderBottomColor: 'black',borderBottomWidth: 1,justifyContent: 'center',height: 50,},leftView: {width: 75,alignItems: 'center',backgroundColor: 'green',height: 50,justifyContent: 'center'}})

手动关闭rows在使用的时候如果需要 关闭row，可以使用以下方法调用

closeRow()

方法关闭row：

<SwipeListrenderHiddenRow={ (data, secdId, rowId, rowMap) => {<TouchableOpacity onPress={ _ => rowMap[`${secId}${rowId}`].closeRow() }><Text>I close the row</Text></TouchableOpacity>}}/>

rowMap

是一个object,结构如下：

{row_hash_1: ref_to_row_1,row_hash_2: ref_to_row_2}

每一个

row_hash

是一个

<section_id><row_id>

结构的字符串如果你使用的是一个单独的

<SwipeRow>

，你一个通过定义

ref

去调用

closeRow()

关闭row

<SwipeRow>

的属性：

leftOpenValue

rightOpenValue

stopLeftSwipe

stopRightSwipe

closeOnRowPress

disableLeftSwipe

disableRightSwipe

recalculateHiddenLayout