Então, vamos começar a trabalhar nesse aplicativo e, para
isso, eu tenho um novo aplicativo
aqui, você o encontrará anexado caso queira criar esse mesmo aplicativo inicial.
Este aplicativo simples nos fornece isso aqui, um aplicativo muito feio, onde temos algum texto sobreposto pela
barra de status, pelo entalhe.
Agora, podemos corrigir isso com a visualização da área de salvamento, como você aprendeu anteriormente, mas
não precisaremos, pois não manteremos esse conteúdo e usaremos uma biblioteca de terceiros que nos permite navegar facilmente entre diferentes
telas e obter animações agradáveis ao longo do caminho, para
que não tenhamos que cuidar
disso e essa biblioteca de terceiros também gerenciará o entalhe no dispositivo e nos dará essa área de salvamento
pronta para uso.
Agora, antes de adicionarmos a biblioteca de terceiros, vamos começar a escrever um código, porque só
podemos navegar entre as telas se tivermos várias telas.
Então, para isso, criarei uma nova pasta de telas aqui e também já criarei uma
pasta de componentes, a diferença será que, na pasta de telas, temos esses componentes
React que, em seguida, usamos como tela inteira, eu acho na pasta de componentes, teremos os componentes que usamos
em nossas
telas. Por exemplo, quando temos essa grade de categorias de refeições, de categorias de alimentos, nosso item
de grade seria um componente, a grade inteira, as categorias de alimentos inteiras tela, no entanto, seria
uma tela e acho que isso faz sentido. Agora, conforme esboçado, conforme exposto, neste aplicativo, precisaremos de duas telas e já criaremos todos
os arquivos e os preencheremos com vida ao longo deste módulo, é claro. Precisaremos da tela de categorias e nomearemos a
tela de categorias de arquivos para deixar bem claro o que há lá
dentro.
Essa é a tela em que podemos selecionar uma categoria como italiano, alemão e americano; portanto, onde
podemos selecionar uma categoria de comida, adicionaremos o conteúdo que refletir isso, adicionaremos uma grade nessa tela,
nessa tela componente mais tarde.
Agora que selecionamos uma categoria, veremos uma lista de refeições que se encaixam nessa categoria e vou nomear essa tela que
veremos, na qual navegaremos para a tela de refeições de categoria, porque esta é a tela
que carrega as refeições para uma categoria escolhida.
Essa é outra tela que precisamos e outra tela para a qual poderemos navegar.
Agora também precisaremos de uma tela de favoritos, que contém todas as nossas receitas favoritas, nossas refeições favoritas
e também precisaremos de um MealDetailScreen, que é a tela que vemos se tocarmos em uma única refeição dentro de
uma categoria escolhida ou em a tela favorita. Isso nos mostra os ingredientes e as
etapas detalhadas para esta refeição.
Agora, e por último, mas não menos importante, conforme indicado, precisaremos de uma tela de filtros, e essa tela de filtros
é a tela que nos permite definir filtros, como comida vegana, para que possamos ver apenas receitas veganas ou vegetarianas ou sem glúten ou
sem lactose, essas serão as quatro
categorias que terei neste aplicativo, então essas são as telas. Agora vamos adicionar componentes conforme necessário e
não adicionar todos os arquivos com antecedência
e, com isso, temos a configuração básica de que precisamos aqui, embora todas as
nossas telas estejam totalmente vazias. Agora vamos preenchê-los com mais vida, passo a passo, mas pelo
menos eu quero configurar um componente básico em cada uma dessas telas.
Então, vou começar na tela de categorias e, é claro, precisamos importar o React do React para
lá porque criaremos um componente React e também importaremos algo do React Native porque, obviamente, criaremos um componente React aqui
que usa alguns componentes do React Native. Para ser mais preciso, começarei aqui simples e
importarei uma visualização e um texto do React Native e, em seguida, criarei meu componente, a
tela de categorias, neste caso, que adota adereços ou que pode receber adereços pelo menos porque, afinal, é um componente
React normal e onde exportarei isso como meu componente padrão. Também adicionarei uma folha de estilo porque é
provável que precisemos disso e, se não o fizermos, ainda podemos excluí-la mais tarde.
Então, eu configurarei meus
estilos aqui com a stylesheet create, assim.
Portanto, esse é um componente React muito básico, mas não
renderiza nada; portanto, dentro da função component aqui, teremos que retornar algo e algo é algum
código jsx onde desejo renderizar uma visualização e, aí, um texto e aqui eu digo a tela de categorias.
Agora também darei a essa visão algum estilo em que eu digo estilos. tela, com um layout de tela muito básico ou um estilo de
tela aqui, onde defino flex como um e justifico o conteúdo para centralizar e alinhar itens para centralizar e,
como você aprendeu, isso fará uma
coisa: centralizará o conteúdo na tela, então ele centralizará este texto na tela no final.
Esse é o componente base e eu copiarei esse conteúdo para todas as outras telas e,
é claro, esse não é o conteúdo final que teremos lá, apenas algum conteúdo fictício para
que possamos começar a navegar entre algumas dessas telas e ver algo .
Então aqui temos a tela de refeição da categoria, esse é o componente aqui e, portanto, é o que
precisamos exportar para cá e aqui, portanto, direi a tela da refeição de categoria como esta. Agora também adicionarei isso na tela de favoritos e renomeá-lo para a tela de
favoritos e, é claro, exportar a tela de favoritos
aqui e aqui, posso
dizer a
tela de favoritos, copiar isso na tela de
filtros e fazer a mesma coisa lá, é a tela
de filtros, renomeei e exportei isso
e também digo a tela de filtros aqui em nosso texto e, por último
mas não menos importante, esse é o MealDetailScreen.
Portanto, aqui temos o
MealDetailScreen, também o nomeei MealDetailScreen aqui e exportarei o MealDetailScreen.
Então, com isso, configuramos tudo nessas telas. Agora, estamos quase terminando toda
a preparação. Só quero adicionar algumas fontes
especiais a esse aplicativo e, a partir de então, mergulharemos na adição de navegação.