如何导航到另一个页面关闭模式？

Question

我要做什么

从模态组件导航时，我想关闭模态。

在我当前的代码中，我可以导航到“详细信息”页面，但是模式仍在打开。

父级组件

toggleModal = () => {
  this.setState({ isModalVisible: !this.state.isModalVisible });
}

<Modal isVisible={this.state.isModalVisible} swipeToClose>
  <Completed nav={this} />
</Modal>

模式组件

navigateWithClosingModal = () => {
  this.props.nav.toggleModal;
  this.props.nav.props.navigation.navigate('Detail', {
    item:this.props.nav.state.item
  })
}

render() {
  return (
    <View>
      <View>
        <View>
          <TouchableOpacity
            block
            onPress={this.navigateWithClosingModal}
          >
            <Text>Detail</Text>
          </TouchableOpacity>
        </View>
        <TouchableOpacity
          onPress={this.props.nav.toggleModal}
        >
          <Text>close</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

如果能给我任何建议，我将不胜感激。

Answer 1

需要通过添加括号（即toggleModal

来调用toggleModal()回调

navigateWithClosingModal = () => {
  this.props.nav.toggleModal(); // <-- invoke function
  this.props.nav.props.navigation.navigate('Detail', {
    item: this.props.nav.state.item,
  })
}