Question

因此，我看到许多发布了相同的问题，但对于某些我似乎无法适应发布的解决方案。.我希望有人能准确地告诉我我需要进行哪些更改因为我不知道如何实施建议的解决方案，所以才能使它正常工作！

Example of someone having the same issue

我有一个文件，其中构建了可滑动组件，另一个类调用了该组件。我已经在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>
    );
  }
}

Agenda.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>
    );
  }
}

在onPress不起作用后反应本机可滑动关闭

1 个答案: