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

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 之前被调用已经完成。

还有家长 应该控制的状态 child .

家

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>