react-native-swipe-list-view侧滑删除组件使用

本文主要是介绍react-native-swipe-list-view侧滑删除组件使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

react-native-swipe-list-view 是一个具有侧滑功能的react-native的listview组件

此组件由两个子组件组成：
<SwipeListView> 是基于listview封装的具有侧滑打开、关闭功能的listview组件，具有一些原生功能行为；例如：当某一行侧滑打开后，在listview滚动或侧滑打开其他行时，会自动关闭此行。

如果你只是想拥有具有侧滑功能的row，那么你可以使用提供的<SwipeRow>这个组件，它同样具有侧滑功能。

例子：

ios

android

安装

npm install --save react-native-swipe-list-view
或yarn add react-native-swipe-list-view

运行示例

源代码地址

在项目的 ./SwipeListExample目录下是以上示例运行效果，运行操作如下：

git clone https://github.com/jemise111/react-native-swipe-list-view.git
cd react-native-swipe-list-view
cd SwipeListExample
npm install
react-native run-ios | react-native run-android

用法

import { SwipeListView } from 'react-native-swipe-list-view';render() {const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});return (<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}><Text>Left</Text><Text>Right</Text></View>)}leftOpenValue={75}rightOpenValue={-75}/>)
}

参考 example.js 去学习全部的使用的方法（包括 <SwipeRow> 的用法）

注意

如果你的row 是可点击的（如：TouchableOpacity, TouchableHightlight等等），建议把此类组件放在最外层；

建议：

renderRow={ data => (<TouchableHighlight onPress={this.doSomething.bind(this)}><View><Text>I am {data} in a SwipeListView</Text></View></TouchableHighlight>
)}

不建议：

renderRow={ data => (<View><TouchableHighlight onPress={this.doSomething.bind(this)}><Text>I am {data} in a SwipeListView</Text></TouchableHighlight></View>
)}

手动关闭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

Per row behavior

perRowBehavior.gif

如果你需要以上的效果，某些row可以侧滑，而某些不可以滑动，可以在renderRow方法返回<SwipeRow>，请参阅下面的示例和API文档，了解如何实现自定义<SwipeRow>。在example.js中还有一个完整的例子。

以下参数可以作为<SwipeRow>的属性被调用：

leftOpenValue
rightOpenValue
stopLeftSwipe
stopRightSwipe
closeOnRowPress
disableLeftSwipe
disableRightSwipe
recalculateHiddenLayout

import { SwipeListView, SwipeRow } from 'react-native-swipe-list-view';<SwipeListViewdataSource={dataSource.cloneWithRows(data)}renderRow={ (data, secId, rowId) => (<SwipeRowdisableRightSwipe={parseInt(rowId) % 2 !== 0}disableLeftSwipe={parseInt(rowId) % 2 === 0}leftOpenValue={20 + parseInt(rowId) * 5}rightOpenValue={-150}><View style={styles.rowBack}><Text>Left Hidden</Text><Text>Right Hidden</Text></View><View style={styles.rowFront}><Text>Row front | {data}</Text></View></SwipeRow>)}
/>

API

SwipeListView(component)

Props	Default	Type	Description
closeOnRowPress	true	bool	当按下一行时，关闭打开的行
closeOnScroll	true	bool	当滚动listview时，关闭打开的行
closeOnRowBeginSwipe	false	bool	当行开始滑动打开时，关闭打开的行
leftOpenValue	0	number	左侧侧滑X的偏移量(正数)
rightOpenValue	0	number	右侧侧滑X的偏移量(负数)
renderRow(必须)	--	func	渲染行
renderHiddenRow	--	func	渲染隐藏的行
swipeToOpenPercent	50	number	滑动%触发行打开
disableLeftSwipe	false	bool	禁止向左滑动
disableRightSwipe	false	bool	禁止向右滑动
recalculateHiddenLayout	false	bool	启动隐藏行实时onLayout计算（默认情况下，出于性能原因，仅在第一次onLayout计算隐藏行大小）
onRowClose	--	func	当滑动行的动画处于关闭状态时调用
onRowDidClose	--	func	当滑动行的动画已经关闭时调用
onRowOpen	--	func	当滑动行的动画处于开启状态时调用
onRowDidOpen	--	func	当滑动行的动画已经开启时调用
swipeRowStyle	--	object	滑动行样式风格
listViewRef	--	func	在ListView设置ref时调用，并将ref传递给ListView. eg:`listViewRef={ ref => this._swipeListViewRef = ref }`
previewFirstRow	false	bool	第一行具有滑动预览效果
previewRowIndex	--	number	指定某一行具有滑动预览效果
previewDuration	--	number	预览持续时间
previewOpenValue	--	number	打开侧滑动画快慢，Default: 0.5 * props.rightOpenValue
friction	--	number	打开关闭动画的摩擦数
tension	--	number	打开关闭动画的张力

SwipeRow(component)

当使用<SwipeRow>时，你必须给<SwipeRow>传递两个元素，第一个将在第二个后面渲染，e.g:

<SwipeRow><View style={hiddenRowStyle} /><View style={visibleRowStyle} /></SwipeRow>

Props	Default	Type	Description
closeOnRowPress	true	bool	当按下一行时，关闭打开的行
friction	--	number	打开关闭动画的摩擦数
tension	--	number	打开关闭动画的张力
leftOpenValue	0	number	左侧侧滑X的偏移量(正数)
stopLeftSwipe	--	number	左侧侧滑X的最大偏移量(正数)
rightOpenValue	0	number	右侧侧滑X的偏移量(负数)
stopRightSwipe	--	number	右侧侧侧滑X的最大偏移量(负数)
onRowPress	--	func	按下滑动行时调用
onRowOpen	--	func	当滑动行的动画处于开启状态时调用
onRowClose	--	func	当滑动行的动画处于关闭状态时调用
swipeToOpenPercent	50	number	滑动%触发行打开
setScrollEnabled	--	func
disableLeftSwipe	false	bool	禁止向左滑动
disableRightSwipe	false	bool	禁止向右滑动
recalculateHiddenLayout	false	bool	启动隐藏行实时onLayout计算（默认情况下，出于性能原因，仅在第一次onLayout计算隐藏行大小）
style	--	object	滑动行样式风格
preview	false	bool	具有滑动预览效果
previewDuration	300	number	预览持续时间
previewOpenValue	--	number	打开侧滑动画快慢，Default: 0.5 * props.rightOpenValue