react-native-sideslip

    1.0.2 • Public • Published

    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)

    Install

    npm i react-native-sideslip

    DownloadsWeekly Downloads

    2

    Version

    1.0.2

    License

    ISC

    Unpacked Size

    318 kB

    Total Files

    7

    Last publish

    Collaborators

    • jszh
    • daxiong123
    • rambos
    • a289459798