一、前言
react-native-swipe-list-view是一个具有侧滑功能的react-native的组件，下面的这篇文章是以翻译官方文档和结合自己的项目所写，不过主要内容是对官方文档的翻译。
git官方地址
二、此组件由两个子组件组成：
-
<SwipeListView>是基于listview封装的具有侧滑打开、关闭功能的listview组件，具有一些原生功能行为；例如：当某一行侧滑打开后，在listview滚动或侧滑打开其他行时，会自动关闭此行。目前<SwipeListView>支持 FlatList 和 SectionList ，具体的详情使用请查看demo中 example.js 文件 -
<SwipeRow>可以单独拿出来用，它不依赖于<SwipeListView>，如果你只是想拥有具有侧滑功能的row，那么你可以使用这个组件，它同样具有侧滑功能。
三、安装
npm install --save react-native-swipe-list-view 或 yarn add react-native-swipe-list-view
四、运行示例
在项目的 ./SwipeListExample目录下是下面gif示例运行效果，运行操作如下：
1、Git上下载项目
2、cd SwipeListExample
3、npm install 或 yarn
4、react-native run-ios | react-native run-android
iOS运行示例.gif
Android运行示例.gif
五、简单用法
import { SwipeListView } from 'react-native-swipe-list-view';
render() {
return (
<SwipeListView
useFlatList
data={this.state.listViewData}
renderItem={ (data, rowMap) => (
<View style={styles.rowFront}>
<Text>I am {data.item} in a SwipeListView</Text>
</View>
)}
renderHiddenItem={ (data, rowMap) => (
<View style={styles.rowBack}>
<Text>Left</Text>
<Text>Right</Text>
</View>
)}
leftOpenValue={75}
rightOpenValue={-75}
/>
)
}
特别注意
如果你的row 是可点击的（如：TouchableOpacity, TouchableHightlight等等），建议把此类组件放在最外层；
建议做法
renderItem={ data => (
<TouchableHighlight onPress={this.doSomething.bind(this)}>
<View>
<Text>I am {data.item} in a SwipeListView</Text>
</View>
</TouchableHighlight>
)}
不建议做法
renderItem={ data => (
<View>
<TouchableHighlight onPress={this.doSomething.bind(this)}>
<Text>I am {data.item} in a SwipeListView</Text>
</TouchableHighlight>
</View>
)}
关闭row
renderHiddenRow={ (data, secId, rowId, rowMap) => (
<View style={styles.rowBack}>
<Text>Left</Text>
<TouchableOpacity style={[styles.backRightBtn, styles.backRightBtnLeft]} onPress={ _ => this.closeRow(rowMap, `${secId}${rowId}`) }>
<Text style={styles.backTextWhite}>Close</Text>
</TouchableOpacity>
<TouchableOpacity style={[styles.backRightBtn, styles.backRightBtnRight]} onPress={ _ => this.deleteRow(rowMap, `${secId}${rowId}`) }>
<Text style={styles.backTextWhite}>Delete</Text>
</TouchableOpacity>
</View>
)}
rowMap对象结构
{
row_key_1: ref_to_row_1,
row_key_2: ref_to_row_2
}
rowMap是一个对象，每一个row_key对应的是一个字符串，如果是section，则row_key的结构是<section_id>.<row_id>，
否则是<row_id>
六、使用<SwipeRow>特别注意点
1、如果你使用的是一个单独的<SwipeRow>，你一个通过定义ref去调用closeRow()关闭row
2、当使用<SwipeRow>时，你必须给<SwipeRow>传递两个元素，示例如下：
<SwipeRow>
<View style={hiddenRowStyle} />
<View style={visibleRowStyle} />
</SwipeRow>
七、<SwipeListView> API（部分）
| Props | Default | Type | Description |
|---|---|---|---|
| useFlatList | false | bool | 使用React Native的FlatList组件 |
| useSectionList | false | bool | 使用React Native的SectionList组件 |
| directionalDistanceChangeThreshold | 2 | number | 更改行的灵敏度 |
| swipeGestureBegan | fun | 开始滑动时调用 | |
| closeOnRowPress | true | bool | 当按下一行时，关闭打开的行 |
| closeOnScroll | true | bool | 当滚动listview时，关闭打开的行 |
| closeOnRowBeginSwipe | false | bool | 当行开始滑动打开时，关闭打开的行 |
| leftOpenValue | 0 | number | 左侧侧滑X的偏移量(正数) |
| rightOpenValue | 0 | number | 右侧侧滑X的偏移量(负数) |
| renderRow(required) | 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> API （部分）
| Props | Default | Type | Description |
|---|---|---|---|
| closeOnRowPress | true | bool | 当按下一行时，关闭打开的行 |
| directionalDistanceChangeThreshold | 2 | number | 更改行的灵敏度 |
| friction | 7 | 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 |
网友评论