Блог

Главная - Вопросы по программированию - Как закрыть компонент, подобный modal, с помощью React Native?

Как закрыть компонент, подобный modal, с помощью React Native?

#java #reactjs #react-native #native

#java #reactjs #react-native #родной

Вопрос:

Я создал индекс класса, который вызывает компонент «TelaAdd» как модальный. Модальное открытие, но я не знаю, как его закрыть. Я пытался использовать setShow, но не работает. В модальном есть значок, который закрывал его раньше, но мне пришлось изменить код, создающий компонент класса, и он перестал работать. Я бы хотел нажать значок «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>"
}

Комментарии:

1. Когда вы передаете setShow в компонент TelaAdd, вы пишете setShow={setShow} или просто setShow? Потому что кажется, что вы просто пишете setShow из того, что написано выше

Ответ №1:

Похоже, вам может потребоваться привязка this к open modal обработчику.

Это можно сделать в конструкторе

 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>