滑动删除不会关闭Swipeable React本机

Question

我正在使用react-native-gesture-handler进行滑动删除目的。它做得很好，但是每当我滑动删除它时，它都会删除该行，但不会关闭可滑动对象。我必须向左滑动才能将其关闭。不明白为什么会这样。我在这里提供代码：-

import Swipeable from 'react-native-gesture-handler/Swipeable';

    LeftActions = (progress,dragX)=>{
  const scale = dragX.interpolate({
    inputRange: [0, 100],
    outputRange: [0, 1],
    extrapolate: 'clamp',
  });
  return(
    <View style={styles.leftAction}>
      <Animated.Text 
      style={[
          styles.textAction,
          {
            transform:[{
              scale
            }]
          }
        ]}>Delete</Animated.Text>
    </View>
  )
}

class SwipeList extends React.Component {
constructor(props) {
    super(props);
}

SwipeableRow = ({ item, index }) => {
  return (
      <Swipeable
        renderLeftActions={LeftActions}
        renderRightActions={RightActions}
        onSwipeableLeftOpen={()=>this.deleteRow(index)}
      >
        <View style={{paddingHorizontal:10,backgroundColor:'#fff',paddingVertical:20}}>
          <Text style={styles.fromText}>{item.from}</Text>
          <Text numberOfLines={2} style={styles.messageText}>
            {item.message}
          </Text>
        </View>
       </Swipeable>
    );
};
state = {
    list:[
      {
        from: "1",
        when: '3:11 PM',
        message: 'message 1',
      },
      {
        from: '2',
        when: '11:46 AM',
        message:'message 2',
      }
    ]
}

deleteRow = (index) =>{
  this.setState(prev=>{
    return{
      list:prev.list.filter((single,i)=>{
        if(index!=i){
          return single
        }
      })
    }
  })

}

render() {
    return (
        <FlatList
          data={this.state.list}
          ItemSeparatorComponent={() => <View style={styles.separator} />}
          renderItem={this.SwipeableRow}
          keyExtractor={(item, index) => `message ${index}`}
        />
      );
}

}

以下是我使用的样式：-

const styles = StyleSheet.create({
    leftAction:{
                  backgroundColor:'violet',
                  justifyContent:'center',
                  flex:1
                }
     });

这是正在发生的事情的动画：

可能是我在犯一些愚蠢的错误，我是React Native的新手。如果我得到任何指导，将会很有帮助。

Answer 1

将唯一的key分配给您的<Swipeable>。

这将解决您在删除另一个项目时项目共享打开状态的问题。

<Swipeable
  key={someUniqueKey}
  ...
>
  ...
</Swipeable>

Answer 2

我刚刚遇到了相同的问题，并尝试使用他们的文档来解决它，但是没有发现任何运气。 这是我编码为逃避它的一种解决方法。

<Swipeable
        overshootRight={false}
        renderRightActions={(progress, dragX) => (
            <RightActions progress={progress} dragX={dragX} onPress={() => {
                styles.rightActionStyle.display ='none';
                onRightPress(index);
                styles.rightActionStyle.display ='flex';
            }}/>
        )}
    >... //code continues

“正确操作”只是我在用户滑动时显示的可滑动组件：

    const RightActions = ({dragX, onPress}) => {
    const scale = dragX.interpolate({
        inputRange: [-100, 0],
        outputRange: [1, 0],
        extrapolate: 'clamp',
    });
    return (
        <TouchableOpacity onPress={onPress}>
            <View style={rightActionStyle}>
                <Animated.Text style={[actionTextStyle, {transform: [{scale}]}]}>
                    Delete
                </Animated.Text>
            </View>
        </TouchableOpacity>
    );
};

我正在使用

styles.rightActionStyle.display ='none';

操作完成后，我将组件放回原处。

styles.rightActionStyle.display ='flex';

以防万一，您可以选择以下样式：

   rightActionStyle: {
        backgroundColor: '#d41359',
        justifyContent: 'center',
        flex: 1,
        alignItems: 'flex-end',
    },

这是一个临时解决方案。如果有人演示如何做得更好，我将感到非常高兴。

Answer 3

我相信您应该在onPress方法中调用this.close（），以在其中渲染左右动作