react-native-sideslip

react-native-sideslip

可以让任意view支持侧滑菜单，处理事件

    

##作者

QQ: 289459798 QQ群: 161263093

欢迎更多的喜欢开源的小伙伴加入

安装

依赖项目 react-native-interactable

> npm install react-native-sideslip --save

使用方式

<Sideslip.View ref={(r) => this.sideslipView = r} style={styles.container}>
    ...
    <Sideslip.Row
        sideslipView={() => this.sideslipView}
        menus={[]}>
        ....
    </Sideslip.Row>
    ...
</Sideslip.View>

示例（listview支持侧滑删除）

import Sideslip from 'react-native-sideslip'

<Sideslip.View ref={(r) => this.sideslipView = r} style={styles.container}>
    <FlatList
        style={{flex: 1}}
        data={this.state.list}
        keyExtractor={(item, key) => key + ""}
        renderItem={({item, index}) =>

            <Sideslip.Row
                key={index}
                sideslipView={() => this.sideslipView}
                menus={[{
                    title: "关注", color: '#f5f5f5', textStyle: {color: '#333'}, onPress: (view) => {
                    }
                }, {
                    title: "删除", color: 'red', type: 'delete', onPress: (view) => {
                        let list = this.state.list.slice();
                        list.splice(index, 1);
                        this.setState({list: list});
                    }
                }]}
            >
                <View style={{
                    flex: 1,
                    backgroundColor: '#FFF',
                    height: 50,
                    alignItems: 'center',
                    justifyContent: 'center'
                }}>
                    <Text>{item}</Text>
                </View>
            </Sideslip.Row>
        }
        ItemSeparatorComponent={() => <View
            style={{height: StyleSheet.hairlineWidth, backgroundColor: '#e2e2e2'}}/>}

    >

    </FlatList>
</Sideslip.View>

Sideslip.View

必须在最外层用这个view包起来，不然无法处理一些点击事件

Sideslip.Row

需侧滑菜单功能的需要用该view包起来

属性

属性名	类型	备注
sideslipView	func	必须属性，需要返回Sideslip.View 的ref
anim	bool	是否启用动画，仅对type=delete时生效，默认为false
menus	array	title(string，菜单名称), color(string，背景颜色), textStyle(文本样式), type(string, 目前只有delete，删除功能必须传delete), onPress(func)