Os modais são uma ótima ferramenta para melhorar as interfaces do usuário. Basicamente, um modal é uma tela que aparece acima de outra tela, direcionando a atenção do usuário para obter informações críticas ou orientá-los para a próxima etapa de um processo. Um modal ativo desativa a tela original, que ainda está visível, solicitando que o usuário interaja com a nova.

Neste tutorial, veremos alguns casos de uso prático para modais e melhoraremos nossa compreensão deles criando o seguinte no React Native:

  • Um modal que é aberto quando um usuário clica em um botão
  • Um modal reutilizável com componentes filhos
  • Um modal pop-up que abre quando um usuário navega para uma tela

Você pode encontrar o código-fonte deste projeto em meu GitHub .

Inicialize o projeto

Primeiro, para inicializar o projeto, digite o seguinte código em seu terminal:

 expo init nome do projeto && cd nome do projeto && expo start

Se você estiver adicionando o modal a um projeto existente em vez de começar do zero, pule esta etapa, adicione react-native-modal ao seu projeto e selecione o título forte.

Selecione a opção tabs (TypeScript) , que deve ser semelhante ao bloco de código abaixo:

 tabs (TypeScript) vários exemplos de telas e guias usando react-navigation e TypeScript

Uma janela do navegador aparecerá com instruções para abrir o projeto Expo. Agora, você pode abrir seu IDE favorito. Se você estiver usando o VS Code, digite code. em seu terminal para abri-lo.

Instalar react-native-modal

react-native-modal é o que você obteria se levasse o componente modal do React Native ao salão de beleza e pedisse uma reforma completa. Ele se baseia no componente modal do React Native, fornecendo belas animações e opções de estilo personalizáveis.

Execute o seguinte código para instalar react-native-modal :

 yarn add react-nativo-modal

Criação de um modal básico

Um modal é disparado por uma ação anterior, como navegar de/para uma tela ou clicar em um botão.

Abra telas/TabOneScreen . Altere o código para se parecer com o bloco de código abaixo:

 import * as React from"react";
import {Button, StyleSheet, Text, View} de"react-native";
importar Modal de"react-native-modal"; função padrão de exportação TabOneScreen () { const [isModalVisible, setIsModalVisible]=React.useState (false); const handleModal=()=> setIsModalVisible (()=>! isModalVisible); Retorna (   Guia um   

Vamos dar uma olhada mais de perto.

useState

 const [isModalVisible, setIsModalVisible]=React.useState (false);

O gancho React useState retorna isModalVisible , um valor com estado, e setIsModalVisible , uma função para atualizá-lo.

O estado inicial é false , então não podemos ver o modal até mudarmos o estado. No nosso caso, usaremos um botão.

handleModal

 const handleModal=()=> setIsModalVisible (()=>! isModalVisible);

Pressionar o botão chamará handleModal e retornará o estado oposto. Verdadeiro se torna falso e falso se torna verdadeiro.

 

Modal tem uma propriedade chamada isVisible que aceita um valor booleano. Como passamos isModalVisible para isVisible , o modal sabe quando deve aparecer.

Seu modal concluído será semelhante à imagem abaixo:

Finishe d Basic React Native Modal

Criando um modal reutilizável

O exemplo anterior criou um modal e botões para abri-lo e fechá-lo. Agora que conhecemos essas etapas, vamos construir um modal personalizado e um botão para inicializá-lo.

Vamos começar com um botão simples para abrir e fechar nosso modal. Na pasta components , crie um novo arquivo chamado Button.tsx e adicione o seguinte código:

 import React from"react";
importar {StyleSheet, Text, TouchableOpacity, View} de"react-native";
exportar tipo ButtonProps={ título: string; onPress: ()=> void;
};
export const Button=({title, onPress}: ButtonProps)=> { Retorna (   {title}   );
};
estilos const=StyleSheet.create ({ botão: { backgroundColor:"blue", marginTop: 15, paddingVertical: 15, borderRadius: 25, largura:"80%", alignItems:"center", }, texto: { cor branca", fontWeight:"700", fontSize: 18, },
});

Sua saída deve ser semelhante à imagem abaixo:

Botão React Native Modal

Agora que criamos um botão, criaremos nosso modal. Na pasta components , crie um arquivo chamado Modal.tsx e adicione o seguinte código:

 import React from"react";
import {StyleSheet, View, Text, Button} de"react-native";
importar RNModal de"react-native-modal";
tipo ModalProps={ isVisible: boolean; filhos: React.ReactNode; [x: string]: qualquer;
};
export const Modal=({ isVisible=false, crianças, ...adereços
}: ModalProps)=> { Retorna (  {crianças}  );
}; const ModalContainer=({crianças}: {crianças: React.ReactNode})=> (  {children} 
); const ModalHeader=({title}: {title: string})=> (   {title}  
); const ModalBody=({crianças}: {crianças ?: React.ReactNode})=> (  {children} 
); const ModalFooter=({crianças}: {crianças ?: React.ReactNode})=> (  {children} 
); estilos const=StyleSheet.create ({ container: { backgroundColor:"#ffffff", borderRadius: 25, borderWidth: 1, borderColor:"# 000", borderStyle:"sólido", }, cabeçalho: { alignItems:"center", justifyContent:"center", }, texto: { paddingTop: 10, textAlign:"center", fontSize: 24, }, corpo: { justifyContent:"center", paddingHorizontal: 15, minHeight: 100, }, rodapé: { justifyContent:"center", alignItems:"center", preenchimento: 10, flexDirection:"row", },
}); Modal.Header=ModalHeader;
Modal.Container=ModalContainer;
Modal.Body=ModalBody;
Modal.Footer=ModalFooter;

Exportamos o componente modal original do primeiro exemplo como Modal . Você notou os adereços animação e backdropTransitions ? Esses adereços são o que fornecem o componente modal nativo da reforma de que estou falando.

Para obter uma lista completa dos adereços disponíveis, verifique a documentação .

Componentes filho e notação de ponto

Usando notação de ponto , vamos exportar Modal como um módulo com componentes filhos. Se desejar adicionar um cabeçalho, você pode acessar o componente do cabeçalho com Modal.Header .

ModalHeader aceita uma string no prop title . Modal.Container , Modal.Body e Modal.Footer aceitam filhos. Um componente filho pode ser qualquer coisa que você quiser, como uma imagem, algum texto, botões ou um ScrollView .

Agora que temos um modal e um botão, volte para telas/TabOneScreen . Em apenas duas etapas, vamos juntar tudo.

Importe nosso novo botão e modal alterando as instruções de importação do bloco de código acima para o bloco de código abaixo, respectivamente:

 import {Button, StyleSheet, Text, View} de"react-native";
importar Modal de"react-native-modal"; import {StyleSheet, Text, View} de"react-native";
import {Button} de"../components/Button";
importar {Modal} de"../components/Modal";

Faça o mesmo para o componente modal na instrução return:

    Olá!  

O resultado deve ser semelhante à imagem abaixo:

Reusable React Native Modal Buttons Dot Notation

Você pode encontrar todas as alterações no GitHub.

Criando um modal pop-up

Agora, temos um modal que aparece quando mandamos. Vamos adicionar pop-ups que aparecem quando queremos pedir ao usuário para ver ou fazer algo. Para começar, vamos criar um cenário de apelo à ação.

Exemplo

Suponhamos que um usuário deva se inscrever para ter acesso a uma tela específica. Queremos criar uma frase de chamariz se o usuário chegar à tela, mas não estiver inscrito.

Vá para screens/TabTwoScreen e troque o código atual pelo código abaixo:

 import React, {useEffect} de"react";
importar {StyleSheet, Text, TextInput, View} de"react-native";
import {Button} de"../components/Button";
importar {Modal} de"../components/Modal"; função padrão de exportação TabTwoScreen () { const [isModalVisible, setIsModalVisible]=React.useState (false); useEffect (()=> { const checkForSubscription=setTimeout (()=> { setIsModalVisible (()=>! isModalVisible); }, 1500); return ()=> clearTimeout (checkForSubscription); }, []); const handleSignUp=()=> { //inscreve o usuário e fecha o modal setIsModalVisible (()=>! isModalVisible); }; const handleDecline=()=> setIsModalVisible (()=>! isModalVisible); Retorna (   Coisas premium aqui         Quer acessar? Só precisamos do seu endereço de e-mail      

useEffect é renderizado novamente quando as dependências na matriz de dependência mudam, indicadas por [] . useEffect faz com que o componente Modal apareça quando você navegar para a tela.

Como não passamos nenhuma dependência, useEffect será renderizado apenas uma vez. setTimeout é usado para simular a verificação se o usuário está inscrito:

 useEffect (()=> { //verificação falsa para ver se o usuário está inscrito const checkForSubscription=setTimeout (()=> { setIsModalVisible (()=>! isModalVisible); }, 1500); return ()=> clearTimeout (checkForSubscription); //matriz de dependência }, []);

Seu modal deve ser semelhante à imagem abaixo:

Módulo pop up nativo do React concluído

Conclusão

Neste tutorial, aprendemos o que são os modais e como funcionam. Em seguida, criamos três modais personalizados que podem melhorar qualquer aplicativo React Native.

Como você pode ver, os modais são uma ótima ferramenta para implementar frases de chamariz. Existem várias outras bibliotecas que funcionam de forma semelhante, como r eact-native-modal-datetime-picker , então vale a pena navegar em npm . Dependendo do seu caso de uso, você pode economizar algum tempo criando um componente personalizado!

Espero que você tenha gostado de aprender sobre modais neste tutorial. Boa programação!

A postagem Criando um modal pop-up em React Native apareceu primeiro no LogRocket Blog .