1. 安装
yarn add react-native-swipe-list-view -S
或
npm install react-native-swipe-list-view -S
2. 使用
import React from 'react';
import {
StyleSheet,
Dimensions,
View
} from 'react-native';
import Base from '../component/Base';
function App() {
return (
<View style={styles.container}>
<Base/>
</View>
)
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1,
},
});
export default App;
import React, { useState } from 'react';
import {
StyleSheet,
TouchableHighlight,
View,
} from 'react-native';
import {
Button,
Text,
Icon,
ListItem,
Left,
Right,
Thumbnail,
Body,
} from 'native-base'
import { SwipeListView } from 'react-native-swipe-list-view';
export default function Basic() {
// 模拟数据, 真实情况下肯定是请求回来在设置的
const [listData, setListData] = useState(
Array(20)
.fill('')
.map((_, i) => ({
key: `${i}`,
text: `Friend #${i}`
}))
);
const closeRow = (rowMap, rowKey) => {
if (rowMap[rowKey]) {
rowMap[rowKey].closeRow();
}
};
const deleteRow = (rowMap, rowKey) => {
closeRow(rowMap, rowKey);
const newData = [...listData];
const prevIndex = listData.findIndex(item => item.key === rowKey);
newData.splice(prevIndex, 1);
setListData(newData);
};
const onRowDidOpen = rowKey => {
console.log('This row opened', rowKey);
};
const renderItem = data => (
<TouchableHighlight
onPress={() => console.log('You touched me')}
style={styles.rowFront}
underlayColor={'#AAA'}
>
<ListItem avatar>
<Left>
<Thumbnail source={{ uri: '图片url' }} />
</Left>
<Body>
<Text>{data.item.text}</Text>
<Text note>Doing what you like will always keep you happy . .</Text>
</Body>
<Right>
<Text note>3:43 pm</Text>
</Right>
</ListItem>
</TouchableHighlight>
);
const renderHiddenItem = (data, rowMap) => (
<View style={styles.rowBack}>
<Button
full
primary
style={[styles.backRightBtn, styles.backRightBtnLeft]}
onPress={() => closeRow(rowMap, data.item.key)}
>
<Text style={styles.backTextWhite}>隐藏</Text>
</Button>
<Button
full
danger
style={[styles.backRightBtn, styles.backRightBtnRight]}
onPress={() => deleteRow(rowMap, data.item.key)}
>
<Icon name='delete' type="AntDesign" />
</Button>
</View>
);
return (
<View style={styles.container}>
<SwipeListView
data={listData}
renderItem={renderItem}
renderHiddenItem={renderHiddenItem}
// leftOpenValue={75}
rightOpenValue={-150}
previewRowKey={'0'}
previewOpenValue={-20}
previewOpenDelay={3000}
onRowDidOpen={onRowDidOpen}
/>
</View>
);
}
const styles = StyleSheet.create({
container: {
backgroundColor: 'white',
flex: 1,
// 将flex:1删除掉后，高度就可以随便设置了
// height: 300,
},
backTextWhite: {
color: '#FFF',
},
rowFront: {
justifyContent: 'center',
// alignItems: 'center',
backgroundColor: 'white',
borderBottomColor: '#d0d0d0',
borderBottomWidth: 1,
height: 60,
},
rowBack: {
flex: 1,
flexDirection: 'row',
justifyContent: 'space-between',
paddingLeft: 15,
alignItems: 'center',
backgroundColor: '#d0d0d0',
},
backRightBtn: {
position: 'absolute',
top: 0,
bottom: 0,
width: 75,
height: '100%',
alignItems: 'center',
justifyContent: 'center',
},
backRightBtnLeft: {
right: 75,
},
backRightBtnRight: {
right: 0,
},
});
3. 结果
滑动前
向右滑动后
