Se você já vem seguindo a minha série de vídeos sobre introdução ao React Native, você percebeu que até agora a gente só fez as coisas em componentes só, que é o componente do aplicativo. A gente ainda não lhe deu com navegação, com a criação de outras cenas para o aplicativo móvel. Até agora a gente fica só na mesma página. Neste vídeo a gente vai falar de um componente chamado Navigator, que é um dos componentes que permite você fazer navegação no aplicativo móvel usando React Native. O Navigator funciona tanto para Android como para o iOS. Neste vídeo a gente vai falar como é que configura o Navigator e a gente vai fazer um aplicativo bem simples. Vamos botar uns três botões aqui nessa cena principal. Em cada botão a gente vai, quando clicar, vai mandar o aplicativo para outra cena, para outra página. O navegação do aplicativo móvel usando o Navigator é feita com um stack. Português pília, a gente vai puxar para empilhar uma cena para stack e quando a gente quiser voltar para a cena anterior a gente vai fazer um pop de empilhar. Se você entende sobre a estrutura de dado pília, então você vai entender como se funciona fundamentalmente, mas não precisa desse detalhe para fazer a navegação. Então vamos lá, eu criei um novo project, chamei ele de navegador, então eu criei o project chamado meu navegador fazendo comando o React Native e Net meu navegador. Esse é o nome do meu aplicativo, você pode dar qualquer nome que quiser. Quando faz isso vai demorar um pouco e o já fiz aqui, vai criar essa gera essa aplicação aqui de demo que a gente pode usar como ponto de partida para o nosso aplicativo. Então depois que fizer isso, dá um CD para entrar no diretório da React Native Run iOS para rodar o aplicativo, vai abrir o simulador do Xcode e também o React Packager numa tela do terminal. As vezes se você tiver problema com runtime development server não tá rodando, dá um NPM start e depois roda React Native Run iOS. Vamos lá então, eu tenho aqui meu aplicativo, vou abrir o Atom, ver o Atom aqui, esperar, Atom abrir, vamos remover tudo isso e vamos botar uns 3 touchable highlight, botões sensíveis ao talk, tá bom, isso que a gente vai fazer primeiro e depois a gente vai lidar com o navigator e ver como a gente configura ele e fazer os outros cenas que na verdade serão outros componentes diferentes que a gente vai criar. Normalmente o React a gente faz vários componentes, a gente pega a interface e quebra e divide em vários componentes menores, mas até agora a gente não fez muito disso porque a gente só veio aprender a usar os componentes que são dados pelo React Native, mas numa aplicação mais complexa você tem que dividir tudo em componentes mais básicos, menores, que vai fazer você re-usar o seu código e também fazer as coisas muito mais convenientes pra programar. Então vamos aqui no, eu vou pro index.ios, vamos a essa aplicação demo daqui, não, dá pra ver, tirar todas as coisas, não quero, vou tirar essas coisas aqui, esses estilos, então vamos botar uns 3 touchable highlight aqui, então como é que se faz? Primeiro importa, touchable highlight, highlight, vamos aqui botar ele, touchable highlight, auto completor, fecha tag, agora vamos dar um texto, então vamos botar uns botões pra ir a página 1, página 2, página 3, pode chamar o que quiser, vou chamar, vou botar a imagem de, vou chamar, sei lá, primeiro, primeira página, primeiro página, salvar aqui, deixa o botão Live Reload Enable, vamos salvar, vai automaticamente atualizar isso, isso aqui é a primeira página, botão né, na verdade é um botão, então vamos botar um estilo pro botão, style, vou fazer o estilo aqui, rapidinho, botão, vamos botar um border with, botão, ils Even, vou botar um border circular, надо o nada, uns 4, botão padding, vou ver como que fica, Vamos montar o bom, hein? Vamos botar um background, code fundo. Background color, sei lá. Muita... Orde P. Botar vermelho. Tá certo que vai ser vermelho, que é verde, que é azul, então tudo vermelho. Orde B, RGV. Mas eu não quero tanto vermelho, botão 128. Mais 96, 1B. Tá bom assim. Vamos mudar o texto também. Botão estilo. Sei lá, botão... Texto do botão. Botão... Botão sei lá, botão branco. RGV branco é todos os cores, né? Aí. Vamos botar... Diminuir um pouco. Só pra ver. Péss. Ah, ficou ruim. Fiquei lá, hein? Não perdi tempo com isso não, né? Botação negrito. On weightboard, negrito. Tá aí. Tá bom assim, né? E vamos tirar esses. Desculpa. Perdi tempo com o estilo não, hein? Então vamos voltar. Já fizemos estilo pro botão, estilo pro texto do botão. Então já tem aqui. Então agora, só botar o on press, né? Botar a propriedade, chamar de on press. E a gente vai fazer alguma coisa que eu não vou definir agora. Deixar assim a função de flash que não vai fazer nada, do tanulo. Mais aperta, né? Clica lá. Então tem isso. Vamos fazer e botar uns três aí. Copiar isso. Dois, três. Vamos mudar os outros aqui pra ser segunda página e terceira. Vamos botar uma margem no bottom pro botão. Que eu não quero... Quero que tenha um espaço aí. Então aqui o botão. Margem, bottom. Tá vinte. Tá bom? Vai ter espaço de baixo no botão. Tá aí. Então a gente fez a página principal. Agora é só falta a gente... Quando clicar um desses e pro... pra cena que a gente quiser. Então vamos fazer a cena aqui pra esses primeiros página, segunda e terceira. O que a gente vai fazer? Vamos aqui no meu navegador e criar uma pasta. Vou chamar aí de component. E vou criar um arquivo chamado primeira página. Tá bom? Aqui, vamos aprender como fazer um componente do react. E até agora a gente só fez tudo nesse componente principal que é o ponto de partida da aplicação aqui, né?