react-native 侧滑组件 react-native-swipe-list-view

一。由于项目需要支持左滑&右滑的list组件，所以上网看了一下，发现了 react-native-swipe-list-view 觉得不错，分享给大家。

（1）.此库支持单个组件的左滑右滑，也支持list组件的左滑右滑

首先看一下效果图：

1.支持左滑和右滑，

2.支持设置禁止左滑和右滑。

3.list组件支持点击其他item时关闭当前item左滑/右滑等等。

二。使用

1. 安装

npm install --save react-native-swipe-list-view

或

yarn add react-native-swipe-list-view




2.使用

/** * Created by [e-mail] on 2017/7/2. */import React from 'react';import {    View,    Text,    ListView,    StyleSheet,    TouchableOpacity} from 'react-native';import {SwipeListView, SwipeRow} from 'react-native-swipe-list-view';export default class Item extends React.PureComponent {    render() {        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});        const dataSource = ['a', 'b', 'c'];        return (            <View style={styles.outView}>                <SwipeRow                    leftOpenValue={75}                    rightOpenValue={-75}                    disableRightSwipe={true}   //禁止向右滑动                >                    <View style={styles.rowBack}>                        <Text allowFontScaling={false}>加入</Text>                        <Text allowFontScaling={false}>购物车</Text>                    </View>                    <View style={{alignItems: 'center', backgroundColor: '#CCC', height: 50, justifyContent: 'center'}}>                        <Text>I am a standalone SwipeRow</Text>                    </View>                </SwipeRow>                <View style={{height: 20}}/>                <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}>                            <TouchableOpacity onPress={() => alert('left')}>                                <View style={styles.leftView}>                                    <Text style={{backgroundColor: 'red'}}>Left</Text></View>                            </TouchableOpacity>                            <View style={styles.leftView}>                                <Text style={{backgroundColor: 'red'}}>Right</Text></View>                        </View>                    )}                    leftOpenValue={75}                    rightOpenValue={-75}                />            </View>        )    }}const styles = StyleSheet.create({    outView: {        flex: 1,        marginTop: 22    },    rowBack: {        alignItems: 'center',        backgroundColor: '#DDD',        flexDirection: 'row',        justifyContent: 'space-between',        flex: 1    },    rowFront: {        alignItems: 'center',        backgroundColor: '#CCC',        borderBottomColor: 'black',        borderBottomWidth: 1,        justifyContent: 'center',        height: 50,    },    leftView: {        width: 75,        alignItems: 'center',        backgroundColor: 'green',        height: 50,        justifyContent: 'center'    }})

手动关闭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

<SwipeRow>的属性：

• leftOpenValue
• rightOpenValue
• stopLeftSwipe
• stopRightSwipe
• closeOnRowPress
• disableLeftSwipe
• disableRightSwipe
• recalculateHiddenLayout