Criação de um modal pop-up no React Native

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       Olá!      );
} estilos const=StyleSheet.create ({ container: { flex: 1, alignItems:"center", justifyContent:"center", }, título: { fontSize: 20, intensidade da fonte: Negrito", }, texto: { fontSize: 16, fontWeight:"400", textAlign:"center", }, separator: { marginVertical: 30, altura: 1, largura:"80%", },
});

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:

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:

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á!   
      Concordar em continuar com este guia      

O resultado deve ser semelhante à imagem abaixo:

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              );
} estilos const=StyleSheet.create ({ container: { flex: 1, alignItems:"center", justifyContent:"center", }, título: { fontSize: 20, intensidade da fonte: Negrito", }, texto: { fontSize: 16, fontWeight:"400", textAlign:"center", }, separator: { marginVertical: 30, altura: 1, largura:"80%", }, entrada: { paddingTop: 10, borderColor:"cinza", borderBottomWidth: 2, }, botão: { flexDirection:"row", flex: 1, justifyContent:"center", }, modal: { largura:"100%", altura:"90%", alignItems:"center", justifyContent:"center", },
});

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:

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 .