Модал не закрывается в моем приложении-реактивной? - PullRequest
Новая
       22

Модал не закрывается в моем приложении-реактивной?

0 голосов
/ 03 июня 2019

Я создаю приложение, в котором я использую модал на разных экранах. Я создал общий компонент для всех модальных. Я передаю JSX в нем и сделать его видимым в соответствии с глобальной переменной. Но проблема возникает, когда я открываю модальное окно, затем закрываю его и перехожу на следующий экран, а затем открываю другой модальный на следующем экране, модал предыдущего экрана также появляется в фоновом режиме.

Я пытался сделать его видимым на основе двух переменных, таких как Глобальная переменная и другой локальной переменной, но все же модальный не закрывается.

Это мой обычный модальный компонент 

  render() {
    let { GlobalStore, renderContent = () => {}, modalStyle, modalHeight = '50%' } = this.props;
    return (
      <Modal
        isVisible={GlobalStore.showModal}
        backdropColor={Constants.COLORS.BLACK}
        backdropOpacity={0.4}
        onBackdropPress={() => GlobalStore.toggleModal(false)}
        style={[styles.bottomModal,modalStyle]}>
        <View style={[styles.modalContent,{height: modalHeight}]}>
          {renderContent}
        </View>
      </Modal>
    )
  }
}

и использование его на экранах, таких как 

   {this.openModal?
    <CustomModal visible={GlobalStore.showModal&&this.openModal} 
      modalHeight = {this.modalHeight} renderContent = 
      {this.ModalContent()}/>
       :
     null
    }

Я просто хочу закрыть предыдущие модалы, которые идут в фоновом режиме. Я не хочу создавать разные файлы для всех модалов. Любая помощь будет принята. Спасибо.

Ответы [ 2 ]

0 голосов
/ 03 июня 2019

Модели являются наложенными специальными компонентами, однако они должны контролироваться своими родительскими компонентами. Я думаю, что вы не размонтируете предыдущий экран, и поскольку вы используете одну глобальную переменную, все несмонтированные модалы имеют значение true. Я бы либо переместил переменную видимости в состояние компонента, либо ограничил область действия. Или вы можете использовать предложение со строкой, но назвать разные модалы, чтобы глобальная переменная указывала только на один мод.

0 голосов
/ 03 июня 2019

делает GlobalStore.showModal строкой, а не bool.

    //action
    const showModal = (modalType = "GLOBAL") => ({type: "SHOW_MODAL", modalType})


    //common modal
    //dispatch action
    dispatch(showModal());
    //check for the visibbility with the global string
    <Modal
        isVisible={GlobalStore.showModal === "GLOBAL"}
        {...restProps}
    />


    //custom modal
    //dispatch action with custom string
    dispatch(showModal("CUSTOM_MODAL"));
    //check for the visibilty with that custom string
    <CustomModal
        isVisible={GlobalStore.showModal === "CUSTOM_MODAL"}
        {...restProps}
    />

    //hide all the modals
    dispatch(showModal(""))
...