Giter Club home page Giter Club logo

react-native-sideslip's Introduction

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)

react-native-sideslip's People

Contributors

a289459798 avatar zhangzy2345 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

5ichong wangzhi17

react-native-sideslip's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.