美文网首页
AntD 侧滑组件的实现

AntD 侧滑组件的实现

作者: JohnYuCN | 来源:发表于2021-01-16 15:15 被阅读0次

    我使用了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
    

    相关文章

      网友评论

          本文标题:AntD 侧滑组件的实现

          本文链接:https://www.haomeiwen.com/subject/zrpnaktx.html