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
• 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)

SwipeRow(component)

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

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

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