Mostrando e ocultando elementos com React Native

O React fornece várias maneiras de manipular a visibilidade dos elementos em uma página. Uma abordagem comum é usar estilo embutido para definir a propriedade display. No entanto, esse método requer estilo embutido, o que pode ser inconveniente e tornar o código menos legível.

Uma solução mais elegante é usar a API React State. A API State permite definir e gerenciar dados dentro de um componente React. Ao alterar o estado de um componente, você pode acionar uma nova renderização, que atualizará a IU com base no novo estado.

Veja como você pode mostrar ou ocultar um elemento em uma página por meio de um evento de clique usando a API React State:

1. Crie um novo componente React, como MyComponent.
2. No método de renderização do seu componente, renderize o elemento que deseja mostrar ou ocultar e use renderização condicional para determinar se o elemento deve ou não estar visível.
3. No método construtor do seu componente, crie uma nova variável de estado, como showElement, e defina-a como falsa.
4. Adicione um manipulador de eventos onClick ao elemento que aciona a alteração de visibilidade. No manipulador de eventos, alterne a variável de estado showElement.
5. Use a variável de estado showElement no método render para renderizar condicionalmente o elemento. Se showElement for verdadeiro, o elemento ficará visível. Se showElement for falso, o elemento ficará oculto.

Aqui está um exemplo de como você pode implementar isso:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showElement: false
    };
  }

  toggleShowElement = () => {
    this.setState((prevState) => ({ showElement: !prevState.showElement }));
  };

  render() {
    return (
      

        {this.state.showElement && 
Hello World!
}
        Toggle
      
    );
  }
}

Este trecho de código cria um novo componente React chamado MyComponent que renderiza um div com o texto "Hello World!" quando a variável de estado showElement é verdadeira. Também inclui um botão que alterna a visibilidade do "Hello World!" elemento.