Закрытие модального в дочернем компоненте React Native - PullRequest
Новая
       106

Закрытие модального в дочернем компоненте React Native

0 голосов
/ 23 ноября 2018

У меня есть два компонента в реагирующем нативе, и я не могу закрыть модальный от моего дочернего компонента.

ListTrips - Parent

ModalAddTrip - Child

ListTrips.js 

import ModalAddTrip from './ModalAddTrip';
....
....
this.state = {
    isModalAddTripVisible: false
} 
....
handleDismissModalAddTrip = () => {
    this.setState({ isModalAddTripVisible: false });
};

closeModal() {
    this.refs.ModalAdd.handleDismissModalAddTrip();
}
....

<ModalAddTrip
    ref="ModalAdd"
    isVisible={this.state.isModalAddTripVisible}
    onBackDropPress={this.handleDismissModalAddTrip}
    closeModal={() => this.closeModal()}
    onRequestClose={this.handleDismissModalAddTrip}
/>

ModalAddTrip.js 

<Modal
    isVisible={isVisible}
    onBackdropPress={onBackDropPress}
    closeModal={this.props.child}
>
<Button
    style={{ fontSize: 18, color: 'white' }}
    containerStyle={{
        padding: 8,
        marginLeft: 70,
    }}
    onPress={this.closeModal}
>

Я не могу закрыть модальное окно после его открытия.Я знаю, что это как-то связано с ссылками / реквизитом, но я возился с этим часами и не могу никуда добраться.Я пробовал что-то вроде this.props.closeModal; вместе с переключением ссылки на дочерний компонент, но это тоже не сработало.внутри функции в ModalAddTrip, но это тоже не сработает.

Любая помощь очень ценится.Спасибо

Ответы [ 2 ]

0 голосов
/ 24 ноября 2018

Вот решение, которое я использую для обработки модальных.

export default class MyModal extends React.Component<Props, State>{

  constructor(props: Props){
    super(props);
    this.state = {
      visible: false,
    }
  }

  // Use this method to toggle the modal !
  toggleModal = () => {
    this.setState({visible: !this.state.visible});
  }


  render(){
    return(
      <Modal
      isVisible={this.state.visible}
      hideModalContentWhileAnimating
      onBackdropPress={() => {
        this.toggleModal();
      }}
      useNativeDriver
      >
        <View style={{backgroundColor: "white", padding: 5}}>
        </View>
      </Modal>
    );
  }
}

Если я нажму за ним, модал закроется -> он может закрыться сам.

Теперь, чтобы управлять им из родительского компонента, просто получите ссылку из вашего модала: 

  <MyModal 
    ref={ref => {
      this.myModal = ref;
    }}
  />

И вы можете переключить его из родительского компонента: 

toggleMyModal = () => {
    if(this.myModal){
      this.myModal.toggleModal();
    }
  }

Дайте мне знать, если он работает:)

0 голосов
/ 23 ноября 2018

ModalAddTrip.js 

  _toggleModal = () =>
      this.setState({ isVisible: !this.state.isVisible });
  ....

  render() { 
  ....
   <Modal
    isVisible={isVisible}
    onBackdropPress={onBackDropPress}
  >
      <Button
            style={{ fontSize: 18, color: 'white' }}
            containerStyle={{
              padding: 8,
              marginLeft: 70,
            }}
            onPress={this._toggleModal} >
</Modal>
...