[英]How to close a component like modal with React Native?
I created a class Index that call a component "TelaAdd" like a modal.我创建了一个像模态一样调用组件“TelaAdd”的类索引。 The Modal open but i don't know how to close that.模态打开,但我不知道如何关闭它。 I tried to use setShow but doesn't work.我尝试使用 setShow 但不起作用。 In the Modal has a Icon that was closing it before, but i had to change code creating a class component and it stopped working.在模态中有一个图标,它之前正在关闭它,但是我不得不更改创建类组件的代码并且它停止工作。 I'd like to press the icon "IconVoltar" in Modal and close that.我想在 Modal 中按下图标“IconVoltar”并关闭它。
Index.js索引.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>
The other file Modal.js另一个文件 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>"
}
Looks like you may need to bind this
to the open modal handler.像你看起来可能需要绑定this
到开模处理。
This can be done in the constructor这可以在构造函数中完成
constructor (props) {
super(props) ;
this.state = {
listaFirebase: [],
showModal: false,
search: ''
};
this.openModal = this.openModal.bind(this);
}
Or can be done using an arrow function或者可以使用箭头函数完成
openModal = (value) => {
this.setState({ showModal: value });
};
It also appears you don't pass a setShow
callback to the modal correctly, it looks like it should be the openModal
callback.看来您没有正确地将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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.