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



如果你需要以上的效果，某些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)




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

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






以上内容是参考github官方文档翻译的（谷歌翻译水准，，，），如有不对之处，请指正，我会及时更新