英文:
How to close a component like modal with React Native?
问题
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={(value) => this.openModal(value)} />
</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>
);
}
英文:
I created a class Index that call a component "TelaAdd" like a modal. The Modal open but i don't know how to close that. I tried to use setShow but doesn't work.
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.
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>
The other file
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>"
}
答案1
得分: 2
看起来你可能需要将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} // <-- 将this.openModal作为setShow传递
/>
</Container>
);
}
英文:
Looks like you may need to bind this to the open modal handler.
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.
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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论