10

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

按下后可滑动按钮不会消失

4

2 回答 2

12

您需要使用具有 close 方法的参考。

首先定义一个 ref

const swipeableRef = useRef(null);

然后将其分配给 Swipeable

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

然后只需调用 close 方法

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

请注意，对于多个 Swipeable，您应该有多个 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];
}
于 2020-04-01T08:58:19.890 回答
1

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

我的代码的一部分：

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

<FlatList
        data={notes}
......

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

于 2020-06-15T15:50:13.353 回答