Question

首先，我将此组件定义为与模态窗口一起重用

模板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()}
        />
    )

单击一个按钮我setState showModal：true，我的模态是打开的，我可以在模态外单击，实际上模态消失但我的state.showModal仍然是：true，如何更新此视图中的状态？< / p>

Answer 1

在React中调用this.setState({showModal: false})我们将这些称为组件而不是＆＃34;模板＆＃34;

Answer 2

您可以将回调传递给onModalHide的{{1}}道具。

在您的CustomModal中： react-native-modal

在“第二个模板”中

<Modal onModalHide={this.props.onModalHide} ... />。

另请注意，您无需跟踪<Modal onModalHide={() => this.setState({ showModal: false })} ... />的州中的可见性，因为它已在CustomModal中具有可见性。只需将支柱直接传递到内部prop：Modal

Answer 3

在您打算hideModal的类中创建一个函数<Modal />，如下所示：

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

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

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

关闭来自hideModal组件的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模式

3 个答案: