Question

我正在创建一个在不同屏幕中使用Modal的应用程序。我为所有Modal创建了一个通用组件。我在其中传递jsx并根据Global变量使其可见。但是问题是，当我打开一个模态然后关闭它，然后移动到下一个屏幕，然后在下一个屏幕中打开另一个模态时，上一个屏幕的模态也会在后台出现。

我试图根据两个变量（如全局变量和另一个局部变量）使其可见，但模态仍未关闭。

这是我的常见模态组件

  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
    }

我只想关闭背景中的先前模式。我不想为所有模式创建不同的文件。感谢您的帮助。

Answer 1

使GlobalStore.showModal为字符串而不是布尔值。

    //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(""))

Answer 2

模型是叠加的特殊组件，但是应由其父组件控制。我认为您没有卸载先前的屏幕，并且因为您使用的是单个全局变量，所以所有卸载的模态的值都为true。我要么将可见性变量移至状态组件并限制作用域，要么可以将建议与字符串结合使用，但可以命名各种模式，因此全局变量仅指向一个模式。

我的本机应用程序未关闭模式吗？

2 个答案: