Отключить модал при переходе на другой экран - PullRequest
Новая
       48

Отключить модал при переходе на другой экран

0 голосов
/ 18 сентября 2018

У меня есть приложение с Домашним экраном , на этом экране я рендеринг Модальный , который открывается на 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;

Ответы [ 2 ]

0 голосов
/ 18 сентября 2018

В идеале вы должны дождаться завершения setState внутри обратного вызова и затем перейти к экрану, поскольку методы async и могут нарушить состояние, если navigate вызывается до setState

также родитель должен контролировать состояние child .

Home 

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

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

Modal 

<Modal
  isVisible={this.props.visible}>
    <Button onPress={this.props.onNavigate}>
      <Text>Button</Text>
    </Button>
</Modal>
0 голосов
/ 18 сентября 2018

Вы должны предоставить ссылку на переменную, которая определяет состояние видимости модального компонента.Вам нужно определить функцию, скрывающую модальное и передать ссылку на функцию модальному компоненту и выполнить ее при нажатии кнопки вместе с действием навигации.

Что-то в строках -

Ваш домашний экран должен иметь такую ​​функцию, как - 

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}
/>
...