如何解决如何使用React Native关闭类似模式的组件?
我创建了一个类索引,该类索引像模式一样调用组件“ TelaAdd”。莫代尔打开,但我不知道如何关闭它。我尝试使用setShow但无法正常工作。 在Modal中,有一个以前关闭过的Icon,但是我不得不更改创建类组件的代码,并且它停止工作。我想按Modal中的图标“ IconVoltar”并关闭它。
Index.js
import TelaAdd from ' ./AddHospital/Modal '
class Index extends Component
{
constructor (props) {
super(props)
this.state = {
listaFirebase: [],showModal: false,search: ''
}}
openModal(value) {
this.setState({
showModal: value })}
render () {
return (
<Container>
<TouchableOpacity style={styles.addButton}
activeOpacity={0.7}
onPress={() => this.openModal(true)}>
<Icon name="plus" size={20} color='#f2f2f2' />
</TouchableOpacity>
<TelaAdd
show={this.state.showModal}
setShow(that's right?) />
</Container>
另一个文件 Modal.js
export default ({ show,setShow }) => {
const onCancel = () =>
{
setShow(false)
}
return (
<ModalHead transparent={ true } visible = { show }
animationType='slide' >
<ModalArea>
<ModalBody>
<Voltar onPress = { ( => onCancel () } >
<IconVoltar width="30" height="30" fill="#000" />
</Voltar>
</ModalBody>
</ModalArea>
</ModalHead>"
}
解决方法
看起来您可能需要将this
绑定到打开的模式处理程序。
这可以在构造函数中完成
constructor (props) {
super(props) ;
this.state = {
listaFirebase: [],showModal: false,search: ''
};
this.openModal = this.openModal.bind(this);
}
或者可以使用箭头功能完成
openModal = (value) => {
this.setState({ showModal: value });
};
似乎您没有正确地向模式传递setShow
回调,看起来应该是openModal
回调。
render () {
return (
<Container>
<TouchableOpacity style={styles.addButton}
activeOpacity={0.7}
onPress={() => this.openModal(true)}
>
<Icon name="plus" size={20} color='#f2f2f2' />
</TouchableOpacity>
<TelaAdd
show={this.state.showModal}
setShow={this.openModal} // <-- pass this.openModal as setShow
/>
</Container>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。