关闭从其他自定义模态导入的 React 模态

Question

首先我定义了这个组件以重用模态windows

模板 1：

...
import Modal from 'react-native-modal';
class CustomModal extends Component {

constructor(props){
    super(props);
}

componentWillReceiveProps(nextProps){
    this.setState({
        visible: nextProps.isVisible
    })
}

state = {
    visible: false
}


render() {
    return (
        <TouchableWithoutFeedback
        onPress={()=>{
            this.setState({
                visible: false
            });
        }}
        >
        <Modal
            isVisible={this.state.visible}
        >
            <TouchableWithoutFeedback onPress={() => {}}>
                <View>
                    {this.props.content}
                </View>
            </TouchableWithoutFeedback>
        </Modal>
        </TouchableWithoutFeedback>
    );
}
}

现在在第二个组件中我称之为：

import Modal from './common/modal';
return (<Modal
        isVisible={this.state.showModal}
        content={this.renderMyContent()}
        />
    )

点击一个按钮我设置状态 showModal : true，我的模态是打开的，我可以在模态外点击，实际上模态消失了，但我的 state.showModal 仍然是 : true，我如何更新状态这个观点？

Answer 1

同样在 React 中调用 this.setState({showModal: false}) 我们将这些称为组件而不是 "templates"

Answer 2

您可以通过回调传递给 react-native-modal 的 onModalHide 道具。

在您的 CustomModal 中： <Modal onModalHide={this.props.onModalHide} ... />

在你的"second template"

<Modal onModalHide={() => this.setState({ showModal: false })} ... />.

另请注意，无需跟踪 CustomModal 的状态中的可见性，因为它已经在 prop 中具有可见性。直接将 prop 传递给内部 Modal 即可：<Modal isVisible={this.props.isVisible} .../>

Answer 3

在您调用 <Modal /> 的 class 中创建函数 hideModal，如下所示：

hideModal = () => {
    this.setState({showModal: false})
}

并将其作为道具传递给 <Modal /> 如下：

    import Modal from './common/modal';
    return (<Modal
        isVisible={this.state.showModal}
        content={this.renderMyContent()}
        hideModal={this.hideModal}
        />
    )

并且为了结束调用 hideModal prop 上面从你的 CustomModal 组件传递如下：

...
import Modal from 'react-native-modal';
class CustomModal extends Component {

constructor(props){
    super(props);
}

componentWillReceiveProps(nextProps){
    this.setState({
        visible: nextProps.isVisible
    })
}

state = {
    visible: false
}


render() {
    return (
        <TouchableWithoutFeedback
        onPress={()=>{
            this.props.hideModal()
        }}
        >
        <Modal
            isVisible={this.state.visible}
        >
            <TouchableWithoutFeedback onPress={() => {}}>
                <View>
                    {this.props.content}
                </View>
            </TouchableWithoutFeedback>
        </Modal>
        </TouchableWithoutFeedback>
    );
}
}

关闭从其他自定义模态导入的 React 模态

Close React modal that was imported from other custom modal

javascript

react-native

react-modal