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 zhuoyuan93@gmail.com 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