美文网首页RN-第三方控件示例react-native
RN-常用第三方组件之react-native-swipeout

RN-常用第三方组件之react-native-swipeout

作者: 精神病患者link常 | 来源:发表于2017-04-21 16:24 被阅读1882次

    左右滑动出现按钮,类似iOS的cell,

    可以自定义滑动出来的component

    地址:https://github.com/dancormier/react-native-swipeout

    导入

    npm install --save react-native-swipeout
    
    

    使用非常简单,多的就不说了,毕竟github上写的很清楚,看看就知道怎么用了,贴一下代码示例

    支持左右滑动,left和right两个属性为数组类型的,支持多个按钮
    数组里面是一个对象吧(理解为),支持多个属性,下面的代码只是写了部分的,文字、颜色、背景色等

    import SwipeView from 'react-native-swipeout'
    
    
    constructor(props){
            super(props);
            this.state={
                Rightbuttons:[
                    {
                        backgroundColor:'red',
                        color:'white',
                        text:'Rbutton1',
                        onPress:()=>{this.aaaa()}
                        // 自定义component
                        component: [<View style={{justifyContent: 'center', height: 130}}>
                                                 </View>],
                    },
                    {
                        backgroundColor:'blue',
                        color:'white',
                        text:'Rbutton2',
                        onPress:()=>{this.aaaa()}
                    },
                    {
                        backgroundColor:'green',
                        color:'white',
                        text:'Rbutton3',
                        onPress:()=>{this.aaaa()}
                    },
                ],
                Leftbuttons:[
                    {
                        backgroundColor:'red',
                        color:'white',
                        text:'Lbutton1',
                        onPress:()=>{this.aaaa()}
                    },
                    {
                        backgroundColor:'blue',
                        color:'white',
                        text:'Lbutton2',
                        onPress:()=>{this.aaaa()}
                    },
                    {
                        backgroundColor:'green',
                        color:'white',
                        text:'Lbutton3',
                        onPress:()=>{this.aaaa()}
                    },
                ]
            }
    
            this.aaaa = this.aaaa.bind(this);
        }
    
        aaaa(){
         console.log('123');
        }
        render() {
            return (
                <View style={styles.container}>
    
                    <SwipeView right={this.state.Rightbuttons}>
    
                        <View style={styles.swipeStyle}>
    
                            <Text>swipe me left</Text>
    
                        </View>
    
                    </SwipeView>
    
                    <SwipeView left={this.state.Leftbuttons}>
    
                        <View style={styles.swipeStyle}>
    
                            <Text style={{right:10,position:'absolute'}}>swipe me right</Text>
    
                        </View>
    
                    </SwipeView>
    
                </View>
            );
        }
    
    

    更多属性如图:

    1F45CDA6-D757-49FD-BFF4-17266B1D7F7F.png EC36A7BA-C0E5-41C2-8CA5-80D6F498FFC7.png swipe.gif

    demo:https://github.com/chjwrr/ThirdPartyToolTest

    DDBDBB7C-A4EA-4D92-9D72-A3FCB039FF2E.png

    相关文章

      网友评论

      • 无神:我用在sectionlist 里,划出来一个,再划,上一个不是应该自动划回去吗,怎么会一直划出来,之前的不收回,不科学啊?
      • 09c70642c84d:我想知道一下 如何做到点击其他地方的时候关闭滑动删除。或者在滑动其他地方的时候把上一个滑动的缩回去
        无神:@精神病患者link常 这个方法好像也不行,划开以后直接关闭了,根本操作不了按钮。
        精神病患者link常:<Swipeout
        close={!(this.state.sectionID === sectionID && this.state.rowID === rowID)}
        right={swipeoutBtns}
        rowID={rowID}
        sectionID={sectionID}
        onOpen={(sectionID, rowID) => {
        this.setState({
        sectionID,
        rowID,
        });
        }}
        onClose={() => console.log('===close') }
        scroll={event => console.log('scroll event') }
        >
        重点应该是 close这个方法
      • 世界有你更精彩:请教个问题啊,为什么我滑动删除之后,再次滑动删除就变得很卡顿,请指导一下;<Swipeout
        close={!(this.state.sectionID === sectionID && this.state.rowID === rowID)}//关闭滑动拖拽
        // left={rowData.left}//在左侧进行拖拽
        right={this.state.Rightbuttons} 在右侧进行拖拽
        rowID={rowID}
        sectionID={sectionID}
        autoClose={true}//按钮点击是否自动关闭
        backgroundColor={'#fff'}
        onOpen={(sectionID, rowID) => {
        this.setState({
        sectionID,
        rowID,
        })
        }}
        onClose={() => console.log('===close')}
        scroll={this.props.scroll}
        >


        精神病患者link常:@1cbf090fdc22 this.props.scroll 这个是一个方法?
        世界有你更精彩:@chj之精神病患者 这个方法怎么了
        精神病患者link常:scroll={this.props.scroll}
        这个scroll 是一个方法吧,

      本文标题:RN-常用第三方组件之react-native-swipeout

      本文链接:https://www.haomeiwen.com/subject/xbidzttx.html