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[/code] 
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 (
<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}>
<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：
<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

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';

<SwipeListView
dataSource={dataSource.cloneWithRows(data)}
renderRow={ (data, secId, rowId) => (
<SwipeRow
disableRightSwipe={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
以上内容是参考github官方文档翻译的（谷歌翻译水准，，，），如有不对之处，请指正，我会及时更新