美文网首页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}
                        />
    

    相关文章

      网友评论

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

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

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