一。由于项目需要支持左滑&右滑的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
/** * 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}> <SwipeRow leftOpenValue={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}}/> <SwipeListView dataSource={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:
<SwipeList
renderHiddenRow={ (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