美文网首页RN-第三方控件示例
RN-第三方之react-native-swipeout 左右滑

RN-第三方之react-native-swipeout 左右滑

作者: 精神病患者link常 | 来源:发表于2017-08-16 15:29 被阅读1687次

本文内容
1、左滑出现删除按钮

可以自定义滑动出来的component

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

687474703a2f2f692e696d6775722e636f6d2f6f43514c4e46432e676966.gif

使用

npm install --save react-native-swipeout


import Swipeout from 'react-native-swipeout';
renderRowList(rowData, sectionID, rowID) {

        // 声明右侧按钮,更多属性访问 https://github.com/dancormier/react-native-swipeout 
        const swipeoutBtns = [
            {
                text: '删除',
                backgroundColor: 'red',
                onPress: ()=>{
                    this.deleteItem(rowID);
                },
                // 自定义component
                    component: [<View style={{justifyContent: 'center', height: 130}}>
                                             </View>],

            }
        ];
        return (

            //更多属性访问 https://github.com/dancormier/react-native-swipeout 
            <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') }
            >
          
                    <View >
                      
                    </View>
            </Swipeout>
        )
    }
<ListView
                        style={{marginTop: 12, backgroundColor: '#F5F5F5'}}
                        dataSource={this.state.dataSource}
                        renderRow={(rowData, sectionID, rowID) => this.renderRowList(rowData, sectionID, rowID)}
                        enableEmptySections={true}
                    />

相关文章

网友评论

  • 39f240a2bb8e:这个滑动有BUG,左滑会遮盖 我的内容。左滑开后 继续向左活动,可以明显测出这个问题,滑出来的conponent宽度是的安全值,超出这个模块宽度都会被遮挡
  • 无神:话说,这个组件只是对listView 有用吗,因为我的sectionlist 就算是手动设置rowid 和sectionid ,在onopen中打印值依然全部是 -1,求解?

本文标题:RN-第三方之react-native-swipeout 左右滑

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