AntD 侧滑组件的实现
2021-01-16 本文已影响0人
JohnYuCN
我使用了SwipeAction,但官网提供示例无法在Android/IOS中直接使用,我做了改进。
效果图:
1. 代码实现:
import React from 'react';
import { View,Text } from 'react-native';
import { List, SwipeAction } from '@ant-design/react-native';
export default class BasicSwipeActionExample extends React.Component {
render() {
const right = [
{
text: 'More',
onPress: () => console.log('more'),
style: { backgroundColor: 'orange', color: 'white' },
},
{
text: 'Delete',
onPress: () => console.log('delete'),
style: { backgroundColor: 'red', color: 'white' },
},
];
const left = [
{
text: 'Read',
onPress: () => console.log('read'),
style: { backgroundColor: 'blue', color: 'white' },
},
{
text: 'Reply',
onPress: () => console.log('reply'),
style: { backgroundColor: 'green', color: 'white' },
},
];
return (
<View style={{ paddingTop: 30 }}>
<List>
<SwipeAction
autoClose
style={{ backgroundColor: 'transparent' }}
right={right}
left={left}
onOpen={() => console.log('open')}
onClose={() => console.log('close')}
>
<List.Item extra="extra content">
可以使用List、FlatList组件!!!
</List.Item>
{/* <Text>可以直接使用任意组件</Text> */}
</SwipeAction>
</List>
</View>
);
}
}
2. package.json中需要追加的库
"@ant-design/react-native": "^4.0.7",
"@react-native-community/async-storage": "^1.12.1",
"@react-native-community/cameraroll": "^4.0.1",
"@react-native-community/masked-view": "^0.1.10",
"@react-native-community/segmented-control": "^2.2.2",
"@react-native-community/slider": "^3.0.3",
"@react-native-community/viewpager": "^4.2.2",
3. 追加的脚本:
yarn add @ant-design/react-native @react-native-community/slider @react-native-community/viewpager @react-native-community/segmented-control @react-native-community/cameraroll @react-native-community/async-storage fbjs