首页 > 解决方案 > 创建模态对象需要帮助处理 isVisible 状态

问题描述

我目前正在尝试使用这样的 react-native-modal 创建一个 Modal 对象

const ModalExample = (props) => {
    return (
        <Modal isVisible={props.isVisible}>
               <Text>Hello!</Text>
               <Button title="Hide modal" onPress={this.setModalVisibility} />
        </Modal>
    )
}

问题是 onPress 应该将状态从 true 更改为 false,但无法访问类中的状态。这是初始化模式的按钮以及我如何调用对象:

<Button title="Show modal" onPress={this.setModalVisibility} />
<ModalExample isVisible={this.state.modalVisible}/>

并且只是以防万一这是我在课堂上的 setModalVisibility

setModalVisibility = () =>{
     this.setState({modalVisible: !this.state.modalVisible})
}

谢谢你的帮助

标签: react-nativestatereact-native-modal

解决方案


您还需要传递函数,

<ModalExample isVisible={this.state.modalVisible} setModalVisibility={this.setModalVisibility}/>

以模态调用该函数,

const ModalExample = (props) => {
    return (
        <Modal isVisible={props.isVisible}>
             <Text>Hello!</Text>
             <Button title="Hide modal" onPress={props.setModalVisibility} />
        </Modal>
    )
}

注意:您无权访问this功能组件。


推荐阅读