React-Native 滑动删除

Posted 2023-02-19

【中文标题】React-Native 滑动删除

【英文标题】：React-Native Swipe to delete

【发布时间】：2021-01-02 13:59:58

【问题描述】：

我正在使用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;

【参考方案1】：

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