本文内容
1、左滑出现删除按钮
可以自定义滑动出来的component
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}
/>
网友评论