1

Olá, tem 1 semana que estou tentando achar esse problema e não consigo resolver... tenho uma aplicação que, em determinado momento abre um modal que sobrepõe a tela principal. Aqui estão meus códigos...

Tela Principal (LanListScreen)

default class LanListScreen extends React.Component {

  render() {

    return (
      <View>
        <HeaderBar />
        <SubHeaderBar />
        <AddLanModal visible={!!this.props.AddLanIsOpen} />
      </View>
    )
  }

  componentWillMount = () => {
    BackHandler.addEventListener('hardwareBackPress', () => {
      this.props.lanToggleAdd();
      return true;
    });
  }

}

const mstp = state => {
  return { AddLanIsOpen: state.lanReducer.AddLanIsOpen }
};

const mdtp = {
  lanToggleAdd
}

export default connect(mstp, mdtp)(LanListScreen);

Modal (AddLanModal)

class AddLanModal extends React.Component {

  render() {
    return (
      <Modal
        animationType="fade"
        transparent={true}
        visible={this.props.visible}
        onRequestClose={() => null}>
        <View>
          <View>
            <Text>teste</Text>
          </View>
        </View>
      </Modal>
    )
  }

  componentWillMount = () => {
    BackHandler.addEventListener('hardwareBackPress', () => {
      this.props.lanToggleAdd();
      return true;
    });
  }

}

const styles = { ... }

const mdtp = {
  lanToggleAdd
}

export default connect(null, mdtp)(AddLanModal);

Meu problema é o seguinte, quando estou em qualquer Screen e tento utilizar o recurso BackHandler o mesmo funciona perfeitamente alterando o estado do meu redux e (no caso dessa tela) abrindo a o meu modal. O problema é que, quando eu abro esse modal, o botão de voltar para de funcionar...

Já tentei acrescentar o evento novamente dentro do modal mas sem sucesso... até pensei que o modal poderia estar interferindo no backbutton, estando por cima de alguma forma e nada... Também tentei acrescentar o evento de voltar para a view que representa meu modalBackdrop e mesmo assim nada...

O que eu preciso fazer pra que eu consiga usar o BackButton dentro de um <Modal/> com o React Native?

EDIT

O problema até foi citado aqui:

Alguém tem alguma idéia de como resolver isso?

2 Respostas 2

2

No seu arquivo Tela Principal (LanListScreen)

Voce poderia tentar algum assim no componentWillMount

componentWillMount = () => {
  if(this.props.AddLanIsOpen){
    // AQUI ELE ENTRARIA NESSA LOGICA QUANDO O MODAL VISIBLE FOSSE TRUE
    // PODERIA DISPARAR UMA ACTION PARA TORNAR MODAL VISIBLE FALSE
    // ASSIM FARIA COM QUE O BACK BUTTON QUANDO CLICASSE COM A MODAL ABERTA ELA IRIA SE FECHARIA
  }
  else{
    // AQUI VOCE CONTROLARIA O BACK BUTTON SEM SER NA MODAL
    BackHandler.addEventListener('hardwareBackPress', () => {
      this.props.lanToggleAdd();
      return true;
    });
  }
}
1
  • O problema é que o próprio modal trava o recurso do hardwareBackPress... Eu descobri isso depois de muito ler e achar essa informação na documentação. então tive que pegar meu modal e transformar em um componente que aparece com base em um estado do redux... Commented 16/11/2018 às 15:05
2

Depois de ler essa Issue do próprio react-navigation, descobri que o Modal bloqueia o acesso ao hardwareBackPress. Sendo assim tive que pegar e transformar meu Modal em um componente absoluto e fazer essa alteração manualmente. Assim:

class LanListScreen extends React.Component {

  render(){

    const AddLan = !!this.props.AddLanIsOpen ? <AddLanModal /> : null;

    return (
      <View style={{ ...styles.container }}>

        <HeaderBar />
        <SubHeaderBar />

        <Transition appear="bottom" style={{ ...styles.container }}>
          <LanList style={styles.container} openDetailItem={this.openDetailItem} />
        </Transition>

        {AddLan}

      </View>

  }

}

Dentro de AddLanModal eu encapsulei tudo dentro de uma View e defini pra ela as seguintes propriedades:

const styles = {
  wrapper: {
    position: 'absolute',
    top: 0, left: 0, bottom: 0, right: 0,
    zIndex: 11,
  }
  ...
}

Ao fazer isso, eu posso controlar se o modal está ativo ou não dentro do redux, em uma variável boleana. assim de qualquer lugar eu posso chamá-lo e ocultá-lo, inclusive no BackHandler.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .