React Native Swipeable close после того, как onPress не работает

Question

Итак, я видел, как многие публикуют одну и ту же проблему, но для некоторых я не могу адаптировать опубликованные решения к моему случаю .. Я надеюсь, что кто-то может сказать мне, какие именно изменения мне нужно сделать, чтобы чтобы это работало, поскольку я не знаю, как реализовать предлагаемые решения!

Я использую React Native Swipeable

Пример того, у кого есть та же проблема

У меня есть файл, в котором я построил Swipeable Component и другой класс, который вызывает этот компонент. Я установил функцию закрытия тайм-аута для onSwipeableOpen в качестве временного решения. Но в идеале он должен закрываться сразу после нажатия «удалить». "..." обозначает другой код, который я удалил, поскольку в данном случае он не важен.

AgendaCard. js

...
const RightActions = ({ onPress }) => {
  return (
    <View style={styles.rightAction}>
      <TouchableWithoutFeedback onPress={onPress}>
        <View style={{ flexDirection: "row", alignSelf: "flex-end" }}>
          <Text style={styles.actionText}>Löschen</Text>
          <View style={{ margin: 5 }} />
          <MaterialIcons name="delete" size={30} color="white" />
        </View>
      </TouchableWithoutFeedback>
    </View>
  );
};
...
export class AgendaCardEntry extends React.Component {
  updateRef = (ref) => {
    this._swipeableRow = ref;
  };
  close = () => {
    setTimeout(() => {
      this._swipeableRow.close();
    }, 2000);
  };
  render() {
    return (
      <Swipeable
        ref={this.updateRef}
        renderRightActions={() => (
          <RightActions onPress={this.props.onRightPress} />
        )}
        onSwipeableOpen={this.close}
        overshootRight={false}
      >
        <TouchableWithoutFeedback onPress={this.props.onPress}>
          <View style={styles.entryContainer}>
            <Text style={styles.entryTitle}>{this.props.item.info}</Text>
            <Text style={styles.entryTime}>
              eingetragen um {this.props.item.time} Uhr
            </Text>
          </View>
        </TouchableWithoutFeedback>
      </Swipeable>
    );
  }
}

Повестка дня. js

...
renderItem(item) {
...
<AgendaCardAppointment
        item={item}
        onRightPress={() => firebaseDeleteItem(item)}
      />
...
}

Answer 1

У меня такая же проблема уже несколько дней. Я смог его взломать, но у меня осталась анимация, которая мне не нравится, но я все равно это сделал.

export class AgendaCardEntry extends React.Component {
  let swipeableRef = null; // NEW CODE
  updateRef = (ref) => {
    this._swipeableRow = ref;
  };
  close = () => {
    setTimeout(() => {
      this._swipeableRow.close();
    }, 2000);
  };

  onRightPress = (ref, item) => { // NEW CODE
      ref.close()
      // Delete item logic
  }

  render() {
    return (
      <Swipeable
        ref={(swipe) => swipeableRef = swipe} // NEW CODE
        renderRightActions={() => (
          <RightActions onPress={() => this.onRightPress(swipeableRef)} /> // NEW CODE
        )}
        onSwipeableOpen={this.close}
        overshootRight={false}
      >
        <TouchableWithoutFeedback onPress={this.props.onPress}>
          <View style={styles.entryContainer}>
            <Text style={styles.entryTitle}>{this.props.item.info}</Text>
            <Text style={styles.entryTime}>
              eingetragen um {this.props.item.time} Uhr
            </Text>
          </View>
        </TouchableWithoutFeedback>
      </Swipeable>
    );
  }
}