本文内容
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}
                    />