1

我是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;
4

1 回答 1

1

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

于 2021-07-17T05:39:41.313 回答