React-Native滑动删除

问题描述

我正在使用react-native-gesture-handler来刷卡。我不知道如何实施删除操作，如果我滑动该项目，它也无法完全滑动和删除，因为我确实需要帮助。

现在只有先刷卡然后抓拍

请有人看一下我的代码，看看我如何实现完整的删除操作，对此我深表歉意!!!!!

import Swipeable from 'react-native-gesture-handler/Swipeable';
import { RectButton } from 'react-native-gesture-handler';

const Todo = (props) => {
  const customList = useSelector(state => state.todo.myCustomItems);
  const renderRightAction = (icon,color,backgroundColor,x,progress) => {
    const trans = progress.interpolate({
      inputRange: [0,1],outputRange: [x,0]
    })

    return (
      <Animated.View style={{ flex: 1,transform: [{ translateX: trans }] }}>
        <RectButton
          style={[styles.rightAction,{ backgroundColor: backgroundColor }]}
        >
          <Feather name="trash-2" size={24} color={'white'} />
        </RectButton>
      </Animated.View>
    )
  }
  const renderRightActions = progress => (
    <View style={{ width: 120,flexDirection: 'row' }}>
      {renderRightAction('delete','#ffffff','#dd2c00',64,progress)}
    </View>
  )
  const updateRef = ref => {
    const swipeableRow = ref
  }

  const renderTodo = ({ item,index }) => {
    return (
      <Swipeable
        ref={updateRef}
        friction={1.5}
        rightThreshold={30}
        renderRightActions={renderRightActions}>
        <ListItem
          title={i.value}
        />
      </Swipeable>
    );
  };

  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={customList}
        keyExtractor={(item,index) => index}
        renderItem={renderTodo}
      />
    </SafeAreaView>
  );
};

export default Todo;

解决方法

刷卡超过阈值时删除卡片。 删除时可以调用Layout Animation API -https://reactnative.dev/docs/layoutanimation，体验更流畅