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

Posted 2023-01-14

我想做的是

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

在我目前的代码中，我可以导航到详细页，但模态仍然在打开。

父组件

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>
  );

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

答案

需要调用 toggleModal 的回调，加入parens，即 toggleModal()

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