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

【问题标题】：Dismiss modal when navigating to another screen导航到另一个屏幕时关闭模式
【发布时间】：2019-02-22 18:42:36
【问题描述】：

我有一个带有主屏幕的应用程序，在这个屏幕上我正在渲染一个在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;

【问题讨论】：

标签： react-native react-navigation react-modal

【解决方案1】：

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

parent 也应该控制 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>

【讨论】：

【解决方案2】：

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

关于 -

你的主屏幕应该有一个类似的功能 -

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

然后将其作为对模态组件的引用传递 -

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

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

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

编辑

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

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

【讨论】：

当我点击按钮时出现此错误：_this2.props.onModalClose() is not a function
你如何将它传递给模态组件

【解决方案3】：

我接受了Pritish Vaidya 的回答，并使其可用于任何屏幕。

首页

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

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

  toggleModal(screenName) {
    this.setState({isModalVisible: !this.state.isModalVisible });
    if (screenName && screenName != '') {
       this.props.navigation.navigate(screenName);
    }
  }

  render() {
    <Modal
      visible={this.state.isModalVisible}
      onDismiss={(screenName) => { this.toggleModal(screenName); }}
    />
    );
  }
}

export default Home;

模态：

class Modal extends Component {

    dismissScreen(screenName) {
        const dismissAction = this.props.onDismiss;
        dismissAction(screenName);
    }

    render() {
      return(
        <View style={{ flex: 1, padding: 20 }}>
            <Button
            title="Dismiss Modal"
            onPress={() => {this.dismissScreen();}}
            />
            <Button
            title="Navigate to Other Screen"
            onPress={() => {this.dismissScreen('ScreenName');}}
            />
        </View>
      );
    }
}

【讨论】：