导航到另一个屏幕时关闭模式

Question

我有一个带有主屏幕的应用程序，在这个屏幕上我正在渲染一个模型，它在button press上打开，在Modal内部我有一个按钮，应该导航我到另一个屏幕，它正确导航但是当我导航到另一个屏幕时莫代尔不会消失，我怎么能隐藏它？

添加代码来演示

家：

import React, { Component } from 'react';
import Modal from './Modal';

class Home extends Component {
  state = {
    isModalVisible: false
  };

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

  render() {
    const { navigate } = this.props.navigation;

    <Modal
    visible={this.state.isModalVisible}
    navigation={this.props.navigation}
    />
    );
  }
}

export default Home;

资金：

import React, { Component } from "react";
import Modal from "react-native-modal";

class Modal extends Component {

  render() {
    const { navigate } = this.props.navigation;

    return (
        <Modal
        isVisible={this.props.visible}>
          <Button onPress={() => {navigate('Main')}}>
            >Button</Text>
          </Button>
        </Modal>
    );
  }
}

export default Modal;

Answer 1

理想情况下，您应该等待setState在回调内完成，然后导航到屏幕，因为这些方法是异步的，如果在navigate完成之前调用setState，可能会破坏状态。

父母也应该控制孩子的状态。

家

onNavigate = () => {
  this.setState({isModalVisible: false}, () => this.props.navigation.navigate('Main')
}

<Modal
    visible={this.state.isModalVisible}
    onNavigate={this.onNavigate}
 />

资本

<Modal
  isVisible={this.props.visible}>
    <Button onPress={this.props.onNavigate}>
      <Text>Button</Text>
    </Button>
</Modal>

Answer 2

您应该提供对定义模态组件的可见性状态的变量的引用。您需要定义一个函数隐藏模态并将函数引用传递给模态组件，并在按下导航操作旁边的按钮时执行它。

有点像 -

您的主屏幕应具有如下功能 -

onModalClose = () => {this.setState({isModalVisible: false})}

然后传递这个作为模态组件的参考，如 -

  <Modal
visible={this.state.isModalVisible}
navigation={this.props.navigation}
onModalClose={this.onModalClose}
/>

并在onPress()组件的<Button/>方法上调用它，如 -

          <Button onPress={() => {this.props.onModalClose(); navigate('Main')}}>

编辑

刚刚注意到，因为你已经有一个切换模态可见性的函数，所以你不需要定义一个新函数。您可以将该函数引用传递给模态组件本身。

  <Modal
visible={this.state.isModalVisible}
navigation={this.props.navigation}
onModalClose={this.toggleModal}
/>