Portanto, para este módulo, anexado, você encontrará novamente um projeto inicial simples.
Lá você tem o aplicativo. arquivo js com uma visualização
vazia, para que não aconteça muita coisa lá.
Você recebe uma pasta de constantes com uma cor básica que eu configurei para você e é isso.
Fora isso, não há nada interessante aqui, é um aplicativo muito
básico que usaremos agora para criar esse aplicativo que acabei de esboçar.
Agora, é claro, você pode absolutamente seguir em frente e criar o
básico por conta própria, portanto, essas três telas diferentes que precisamos no final ou quatro telas diferentes, uma para todos os
lugares, uma para os detalhes do local, uma para criar um novo local e um para o mapa em
tela cheia que também queremos mostrar, você pode fazer isso absolutamente e criar o esqueleto base para essas
telas por conta própria, também configurar a navegação básica porque essas são, obviamente, todas as coisas que já fizemos
várias vezes nesse curso.
Também é com as coisas que começarei nas próximas palestras, caso você queira seguir por lá
ou comparar sua solução com a minha e, a partir de
então, mergulharemos na essência deste módulo, abordaremos como adicionar recursos nativos de dispositivos . Então, vamos começar com o básico,
portanto.
Vou adicionar uma nova tela de pasta com as quatro telas que eu quero ter e que seriam
o arquivo de tela da lista de locais, o arquivo de tela de detalhes do local, o novo arquivo de tela do local e também a tela do mapa, onde
podemos ver essa tela inteira mapear e preenchê-los-ei com conteúdo em todo este módulo,
mas estas são as quatro telas básicas necessárias.
Também adicionarei uma pasta de navegação para que possamos configurar a navegação lá
e aqui configurarei meu PlacesNavigator. arquivo js. Agora, no projeto inicial que forneci, o
React Navigation e todas
as suas dependências já estão instaladas; portanto, se você estiver usando
isso, não precisará instalá-lo manualmente; caso contrário, se estiver usando seu próprio projeto inicial, verifique se
instalar React Navigation com npm install React Navigation e também certifique-se de instalar essas dependências extras aqui para garantir
que o React Navigation funcione com o expo.
Portanto, com isso instalado, agora é claro que podemos configurar a navegação aqui no navegador de locais e, para isso,
aqui importarei do React Navigation e o que importarei é, obviamente, a função de
criação do navegador de pilha, então crie o navegador de pilha
e também crie um contêiner de aplicativo, o que também precisamos fazer porque precisamos fazer as duas coisas
- crie um navegador de pilha e configure o contêiner de aplicativos posteriormente.
Agora também precisamos importar as telas com as quais queremos trabalhar e essa seria a tela da lista de locais que eu
importarei da pasta screens e lá, é a tela da lista de locais. Também precisaremos da tela de detalhes do local, é
claro, da tela de detalhes do local que é importada das telas, da tela de detalhes do local
e também, obviamente, das outras duas telas.
Então, obtivemos a nova tela de local a partir de telas, nova tela de local e, por último, mas não menos importante, também precisamos importar nossa
tela de mapa aqui da pasta screens e essa seria a tela do mapa.
Agora podemos configurar nosso navegador de pilha aqui e eu armazenarei esse navegador de locais em uma constante e, como você
também aprendeu, agora estamos mapeando identificadores para nossas telas, portanto, talvez tenhamos
o identificador de locais mapeado na tela da lista de locais , mapeamos o identificador de detalhes do local
para a tela de detalhes
do local, também mapeamos o novo identificador de local para a nova tela do local e, por último, mas não menos importante,
talvez o mapa seja mapeado para a tela do mapa. E com isso, podemos configurar algumas opções de navegação padrão
aqui, então passarei um segundo argumento e, é claro, configurá-lo é totalmente opcional, mas adicionarei opções
de navegação padrão a todas as telas e desejo definir meu estilo de cabeçalho aqui e verifique se estamos usando uma
cor de fundo, dependendo de estarmos rodando no Android ou não.
Portanto, importarei essa coisa de API da plataforma do React Native e também precisarei da minha cor, também importarei cores
de Constantes / cores, o que também é necessário porque, com isso, agora podemos verificar se o sistema operacional da plataforma é Android
e, se for, podemos garantir que a cor do plano de fundo do cabeçalho seja a
nossa cor principal; caso contrário,
não definirei nenhuma cor. Quero usar a aparência transparente padrão usada pelo iOS e também configurar uma cor
de tonalidade do cabeçalho para o texto lá, novamente verificando a plataforma, porque se a plataforma
for Android, já que temos um plano de fundo sólido, definirei a cor da tonalidade para
branco, para iOS, farei o oposto; cor primária. Agora que está aqui, não tenho fontes personalizadas neste projeto,
é claro que você pode adicionar algumas, se quiser. Com essa configuração, podemos exportar nosso contêiner de aplicativos, que,
portanto, precisamos criar com criar contêiner de aplicativos e passar no navegador de locais aqui. Agora essa é a configuração de navegação, é
claro no aplicativo.
arquivo js agora podemos usar isso.
Portanto, aqui devemos importar o navegador de locais da pasta de navegação, navegador de locais, não precisamos mais da visualização de visualização
aqui e, portanto, podemos apenas retornar o navegador de locais. Como não estou carregando nenhuma fonte personalizada, também
não preciso fazer esse aplicativo carregando coisas que fizemos anteriormente
ou em outros módulos. Aqui, basta retornar isso desde o início.
Agora, nessas telas aqui, na tela da lista de locais, importarei o React do React, importarei algumas coisas do React Native, provavelmente
uma visualização, um texto e uma folha
de estilo
e, em seguida, podemos ver se precisamos de outra coisa mais tarde no React Native e, em seguida, configure a
constante aqui, a tela da lista de locais é um componente normal do React que recebe adereços e cujo final retorna algum
conteúdo, aqui retornarei uma exibição com um texto da tela da lista
de locais, portanto, apenas alguns conteúdo fictício por enquanto e também tenha a folha de
estilo configurada aqui com a Folha de estilo. criar e, finalmente, exportar
a tela da lista de locais.
E este será o esqueleto básico que podemos usar para todas
as visualizações, então eu o colocarei em todas as visualizações e apenas ajustarei este nome aqui.
Então, aqui temos a tela de detalhes do local que eu quero usar e, em seguida, copie-a também na nova tela de
local e substitua esse nome aqui nos três locais e,
por último, mas não menos importante, solte-o também na tela do mapa para ter isso aqui como
bem, e é claro que adicionaremos o conteúdo real ao longo deste módulo.
Então, essas são as telas criadas, se
agora salvarmos isso e você o executar com o npm start ou com o expo start e o
executar no seu emulador ou emuladores favoritos, assim que terminar a construção, veremos a tela da lista de
locais no final, como esta.
Agora, é claro, não temos um título de cabeçalho aqui, portanto, certifique-se de definir um, também no
Android, indo para a tela da lista de locais e, aí, podemos adicionar opções de navegação da tela da lista de locais e defini-lo
como um objeto estático aqui, onde podemos adicionar um título de cabeçalho de todos os lugares ou algo assim e com isso, é claro, uma
vez que isso é recarregado, vemos esse título aqui na tela da lista de locais.
Essa é a tela básica configurada que precisamos para este módulo aqui. Com isso antes de nos aprofundarmos no conteúdo das
outras telas, vamos garantir que também tenhamos um
botão de adição aqui no cabeçalho, o que nos levará à nova tela
do local, porque é aí que podemos começar a tocar em funcionalidades nativas do dispositivo e com
a adição de locais.
Agora, é claro que você sabe como adicionar um botão ao cabeçalho do seu navegador, tudo o que você precisa fazer
é instalar um novo pacote com o npm install --save, e esse é o pacote react-navigation header-buttons que usamos algumas
vezes ao longo deste curso e vou usá-lo exatamente da mesma maneira que o usei
no restante do curso.
Portanto, criarei uma pasta de componentes na qual posso configurar meu próprio
componente de botão de cabeçalho para ter esse componente de botão reutilizável pré-configurado e, nesse componente, importo o botão de cabeçalho deste pacote
de botões de cabeçalho de navegação React que acabamos de instalar. Importe Ionicons do expo / vector-icons, um pacote que você pode querer
instalar caso esteja recebendo erros aqui com o npm install
--save e também importe as cores constantes da pasta constantes e, arquivo de cores e, em seguida, aqui nós tem um botão de cabeçalho personalizado de
componente regular que recebe adereços que retornam algum jsx e aqui quero retornar
o botão de cabeçalho que estamos importando, mas agora vamos configurá-lo de acordo com
nossos requisitos.
Antes de tudo, encaminhando todos os acessórios para ele e, em seguida, podemos definir o componente de
ícone como
ionicon, para que isso seja usado, defina o tamanho do ícone aqui talvez como 23, porque acho que funcionou
muito bem até agora e
defini a cor para e agora eu vou precisar de uma outra importação, vou precisar importar a plataforma do React Native, porque agora quero
verificar a plataforma aqui e, se
a plataforma for Android, teremos um sólido histórico, então quero usar o branco como um cor
do ícone; caso contrário, uso minha cor principal.
Agora, com isso, a única coisa que resta a fazer é exportar esse botão de cabeçalho personalizado aqui e agora podemos começar
a usá-lo na tela da lista de locais. Também lá, como antes,
importo dois outros pacotes de react-navigation-header-buttons, duas outras coisas deste pacote e que seriam meus botões e itens de
cabeçalho, ambos precisam ser importados e, além disso, também podemos importar nossos próprio botão de cabeçalho
personalizado agora da pasta de componentes e, a partir desse arquivo de botão de
cabeçalho, no qual acabamos de trabalhar. Porém, com isso importado, podemos alterar nossas
opções de navegação aqui para serem dinâmicas, onde temos essa função que nos fornece os dados de navegação
e que, em seguida, retornam esse objeto de configuração, pois isso nos permitirá também vincular o botão a alguma função
que recebemos via parâmetros de rota porque aqui, quero adicionar o cabeçalho à direita para adicionar meus botões de cabeçalho e,
é claro, agora isso também é um padrão que fizemos muitas vezes ao longo deste curso,
adicionamos os botões de cabeçalho assim e temos o item lá. No componente de botões de cabeçalho, podemos definir o
componente de botão de cabeçalho e apontar para nosso componente de botão de cabeçalho personalizado aqui e no item, agora
definimos um título, como adicionar local, e definimos um nome de ícone
aqui, que depende da plataforma, portanto portanto, importarei realmente esta API da plataforma aqui do React Native e agora podemos verificar
se o sistema operacional da plataforma é Android, se for esse o caso, desejo defini-lo como md add, caso contrário, para o
ios add que adiciona um botão de adição para o plataforma
específica, seguindo a aparência específica dessa plataforma. Também precisamos adicionar a função onPress e,
se tocarmos nela, eu simplesmente quero navegar com o método de navegação aqui e é por isso que precisamos
ter essa função dinâmica aqui, para que possamos acessar os dados de navegação e, em seguida, a
navegação, navegar para novo local e novo local aqui, é claro, é o meu identificador no navegador de locais dessa nova tela de local.
Então, com isso, temos uma maneira de ir para a tela e, portanto, se salvarmos isso,
poderemos fazer isso.
Obviamente, estou recebendo um erro porque no componente do botão do cabeçalho, já que tenho um componente React lá, importar
o React do React não parece a pior ideia, então vamos corrigir rapidamente isso aqui no
componente do botão do cabeçalho, mas agora com isso , enquanto isso é recarregado, temos esse botão de adição e
podemos ir para a nova tela de locais, para a nova tela de locais, também aqui no Android, é claro.
Agora, nessa nova tela de local, também podemos adicionar opções de navegação para definir um título, novas
opções de navegação na tela de local, configurá-lo para um objeto estático no momento, porque neste momento não precisamos
que isso seja uma função, precisamos acessar os dados de navegação, precisamos apenas definir o título do cabeçalho para adicionar um local
e, com isso, se o salvarmos, obviamente, se formos para lá, veremos esse título no cabeçalho.
Portanto, essa é a configuração básica aqui, agora
podemos trabalhar na tela de adicionar local para garantir que possamos adicionar um local.