在使用react-native-swipeout时,可以通过在列表中的行之间插入分隔线来实现分隔效果。以下是一种实现方法:
npm install react-native-swipeout --save
import Swipeout from 'react-native-swipeout';
renderItem = ({ item }) => {
const swipeoutButtons = [
{
text: 'Button 1',
onPress: () => console.log('Button 1 pressed'),
},
{
text: 'Button 2',
onPress: () => console.log('Button 2 pressed'),
},
];
return (
<Swipeout right={swipeoutButtons}>
<View style={styles.listItem}>
<Text>{item.title}</Text>
</View>
</Swipeout>
);
}
renderItem = ({ item, index }) => {
const swipeoutButtons = [
{
text: 'Button 1',
onPress: () => console.log('Button 1 pressed'),
},
{
text: 'Button 2',
onPress: () => console.log('Button 2 pressed'),
},
];
return (
<View>
<Swipeout right={swipeoutButtons}>
<View style={styles.listItem}>
<Text>{item.title}</Text>
</View>
</Swipeout>
{index !== data.length - 1 && <View style={styles.separator} />}
</View>
);
}
const styles = StyleSheet.create({
separator: {
height: 1,
backgroundColor: 'gray',
},
});
通过以上步骤,你可以在使用react-native-swipeout时,在列表中的行之间添加分隔线。请注意,以上代码仅为示例,实际使用时需要根据具体需求进行调整。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云