一、前言

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（部分）

八、<SwipeRow> API （部分）