react-native-swipe-list-view组件使用分析

一、前言

react-native-swipe-list-view 是一个具有侧滑功能的react-native的组件，下面的这篇文章是以翻译官方文档和结合自己的项目所写，不过主要内容是对官方文档的翻译。
git官方地址

二、此组件由两个子组件组成：

• 是基于listview封装的具有侧滑打开、关闭功能的listview组件，具有一些原生功能行为；例如：当某一行侧滑打开后，在listview滚动或侧滑打开其他行时，会自动关闭此行。目前支持 FlatList 和 SectionList ，具体的详情使用请查看demo中 example.js 文件
• 可以单独拿出来用，它不依赖于，如果你只是想拥有具有侧滑功能的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 (
         (
                
                    I am {data.item} in a SwipeListView
                
            )}
            renderHiddenItem={ (data, rowMap) => (
                
                    Left
                    Right
                
            )}
            leftOpenValue={75}
            rightOpenValue={-75}
        />
    )
}

特别注意

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

建议做法

renderItem={ data => (
    
        
            I am {data.item} in a SwipeListView
        
    
)}

不建议做法

renderItem={ data => (
    
        
            I am {data.item} in a SwipeListView
        
    
)}

关闭row

renderHiddenRow={ (data, secId, rowId, rowMap) => (
                            
                                Left
                                 this.closeRow(rowMap, `${secId}${rowId}`) }>
                                    Close
                                
                                 this.deleteRow(rowMap, `${secId}${rowId}`) }>
                                    Delete
                                
                            
                        )}

rowMap对象结构

{
    row_key_1: ref_to_row_1,
    row_key_2: ref_to_row_2
}

rowMap是一个对象，每一个row_key对应的是一个字符串，如果是section，则row_key的结构是.，
否则是

六、使用特别注意点

1、如果你使用的是一个单独的，你一个通过定义ref去调用closeRow()关闭row
2、当使用时，你必须给传递两个元素，示例如下：

七、 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	打开关闭动画的张力

八、 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