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
上一篇下一篇

猜你喜欢

热点阅读