React Native Swipeable（滑动删除）未关闭

Posted 2023-02-19

【中文标题】React Native Swipeable（滑动删除）未关闭

【英文标题】：React Native Swipeable (Swipe to delete) not closing

【发布时间】：2020-03-20 04:05:38

【问题描述】：

我正在使用来自 React-Native-Gesture-Handler 的 Swipeable 在我的页面上合并滑动删除。 当我按删除时，联系人被删除，但滑动保持打开状态。

我希望它在被按下后关闭，但我似乎不知道该怎么做。

这是我的代码：

const RightActions = (progress, dragX) =>  
return (
<TouchableOpacity onPress=()=>DeleteContact(i)>
  <View style=[ContactsStyles.rightAction]>
    <Text style=ContactsStyles.actionText>Delete</Text>
  </View>
</TouchableOpacity>
) 

这是我可以滑动的地方：

<Swipeable renderRightActions=RightActions >

     <View style=ContactsStyles.UserContainer>

         <Text numberOfLines=1 style=[Fonts.Name]> obj.firstname obj.lastname </Text>


         /* Message/Call Container */
          <View style=ContactsStyles.ImageCont>
                    /* Message */
                    <TouchableOpacity onPress=()  => Communications.text(obj.phone, 'Hey ' + obj.firstname + ', im in need of a Ryde. Are you able to pick me up? This is my current location: ' + location) >
                      <View style=ContactsStyles.ImageBox>
                        <Image style=ContactsStyles.Image source=require('../../assets/icons/message.png') />
                      </View>
                    </TouchableOpacity>

                    /* Call */
                    <TouchableOpacity onPress = () => Communications.phonecall( obj.phone , true)>
                      <View style=ContactsStyles.ImageBox>
                        <Image style=ContactsStyles.Image source=require('../../assets/icons/phone.png') />
                      </View>
                    </TouchableOpacity>
                  </View>
                  /* End of Message/Call Container */
      </View>
</Swipeable>

【参考方案1】：

你需要使用一个有 close 方法的引用。

首先定义一个参考

const swipeableRef = useRef(null);

然后将其分配给 Swipeable

<Swipeable
  ref=swipeableRef
  renderLeftActions=renderLeftActions
  onSwipeableLeftOpen=() => handleComplete(item)
>
    ...
</Swipeable>

然后调用 close 方法

const closeSwipeable = () => 
  swipeableRef.current.close();

注意，对于多个 Swipeable，您应该拥有 multiple refs。

let row: Array<any> = [];
let prevOpenedRow;

renderItem ( item, index ) 
  return (
    <Swipeable
      ref=ref => row[index] = ref
      friction=2
      leftThreshold=80
      rightThreshold=40
      renderRightActions=renderRightActions
      containerStyle=style.swipeRowStyle
      onSwipeableOpen=closeRow(index)
      ...
    >
    ...
    </Swipeable>);


closeRow(index) 
  if (prevOpenedRow && prevOpenedRow !== row[index]) 
    prevOpenedRow.close();
  
  prevOpenedRow = row[index];

【参考方案2】：

我遇到了同样的问题。我解决这个问题的方法是先将状态数组（显示在列表中）设置为 []，然后再删除该特定项目。它清理了屏幕（包括操作面板）并呈现了新项目。

我的代码的一部分：

const [notes, setNotes] = useState([]);

<FlatList
        data=notes
......

当一个笔记被删除时，我做了：setNotes([]) 然后 setNotes(newNotes)