React Native 轻松实现购物车滑动删除

2023-11-29 10:05:55

随着电子商务的蓬勃发展，购物车功能已成为必不可少的存在。作为一名 React Native 开发人员，了解如何在应用程序中实现滑动删除效果至关重要。本文将手把手指导你使用 React Native 实现这一功能。

设置购物车

首先，我们创建一个 Cart 组件，它将包含购物车的物品和一个用于管理删除的手势。

import React, { useState } from "react";

const Cart = () => {
  const [items, setItems] = useState([]);

  return (
    <View>
      {items.map((item) => (
        <ListItem item={item} onDelete={() => setItems(items.filter((i) => i.id !== item.id))} />
      ))}
    </View>
  );
};

创建滑动删除手势

下一步，我们将使用 PanResponder 创建滑动删除手势。

import { PanResponder, Animated } from "react-native";

const ListItem = ({ item, onDelete }) => {
  const panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderMove: (_, gestureState) => {
      if (gestureState.dx > 100) {
        onDelete();
      }
    },
  });

  return <View {...panResponder.panHandlers} />;
};

添加动画效果

为了使滑动删除更加流畅，我们可以添加一些动画效果。

import { Animated } from "react-native";

const AnimatedListItem = ({ item, onDelete }) => {
  const panResponder = PanResponder.create({
    ...
  });

  const translateX = new Animated.Value(0);

  const onDeleteAnimated = () => {
    Animated.timing(translateX, {
      toValue: 100,
      duration: 200,
    }).start(() => onDelete());
  };

  return (
    <Animated.View {...panResponder.panHandlers} style={{ transform: [{ translateX }] }}>
      {/* Item content */}
    </Animated.View>
  );
};