React Native: aprenda fazendo [2024]

1. Introdução: Bem-vindo ao curso React Native. Neste curso, vamos aprender a criar um aplicativo de filmes a partir do zero usando um React Native CLI. E neste curso você será capaz de ver catálogos de filmes, e também alguns controles deslizantes na parte superior dentro do aplicativo. Além disso, você poderá navegar até algum filme e ler dados ou esse filme e exibir algumas informações sobre ele, como as categorias da classificação do filme e alguma descrição. E também, você verá a data de lançamento deles. Claro que teremos algum botão play onde você pode reproduzir o filme e você pode reproduzir algum vídeo com indicadores de carregamento. E você será capaz de girar seu telefone e você vai ver como ele é quinto e se adaptar diretamente para ter uma tela cheia de seu aplicativo diretamente quando estamos virando seu formulário é tudo por sua mão. E também, vamos fazer exatamente algo como procurar filmes de um banco de dados real que está conectado à Internet. E você pode procurar, por exemplo, por alguns filmes e você pode exibir esses filmes e você pode visitá-los para ver sua classificação e algumas informações sobre este filme. Por exemplo, eu estou procurando por algum filme e eu vou obtê-lo, e então eu vou obter todas as informações sobre ele. E também não posso tocá-lo. Claro que você pode ter muita experiência com este curso. Você vai aprender muito. Você pode ter esta aplicação em seu portfólio. Você pode apresentá-lo quando você tem uma entrevista de emprego ou mesmo quando você tem um cliente para exibir este aplicativo para seus clientes para que você possa atraí-los e ter algumas inscrições para eles. Além disso, eu não gosto de seus cursos que são balling, como quem está indo teoricamente e você vai ver o que é componente, o que é serviço, etc. Mas gosto de fazer algo impraticável. Eu gosto de ver algo na minha frente que está me deixando feliz no final e fazendo alguma aplicação. Posso apresentá-lo aos meus amigos também. Como vamos chamar bibliotecas externas, como podemos usar componentes do React Native. A coisa boa sobre este curso, Não é baseado na Expo, que é exatamente para iniciantes. Agora as empresas e empresas profissionais, eles estão usando realmente apenas como React Native CLI. Espero que você fique feliz depois de se inscrever neste curso porque no final você terá algum pedido entre suas mãos e você não pode se orgulhar sempre disso. E, claro, ficarei muito feliz em responder à sua pergunta. E discutimos muitas coisas juntos. Então, você está pronto? Vamos começar. 2. Requisitos do curso: Ok, quem pode fazer este curso ou quais são os requisitos do curso? Então, primeiro de tudo, você não precisa saber nada sobre React Native. Vou mostrar-lhe todas as possibilidades de construir um aplicativo usando Reagir nativo, é claro, mas eu não vou ensinar-lhe tudo sobre Reagir nativo. Vou ensinar-lhe o que precisamos para a nossa aplicação neste curso também. Você não precisa conhecer nenhum conhecimento de avaliadores pares sobre desenvolvimento móvel. Você só precisa saber sobre alguns pequenos conceitos básicos de estilo, que eu também vou explicar durante o curso. E agora o que você deve saber, você não deve JavaScript porque você sabe, React Native é construído em JavaScript e você pode usar JavaScript para gerar aplicação nativa. E também, você precisa saber React. Reagir também é um framework que é construído sobre JavaScript, mas este React é direcionado para ser usado em aplicações web, não em telefone celular. Como React Native está fazendo, mesmo isso, eu vou explicar quais são os componentes, quais são os adereços, e quais são os estados neste curso? Então, dessa forma, você vai aprender fazendo isso, eu não vou explicar todos React Native. Só vou explicar o que precisamos para este curso. E estamos construindo vários cursos para que você possa tomar todos eles. Você vai ver como prático e fácil de aprender React Native sem obter um curso de documentação e passar cerca de 20 horas. E você aprendeu apenas coisas teóricas. A melhor maneira é aprender prático, fazendo algo prático sempre para aprender mais e mais. 3. O que é o Reagir Nativo: Ok, Como eu disse antes, React Native é semelhante a reagir, mas é construído para o desenvolvimento de aplicativos móveis. Então, como podemos dizer, que a construção de aplicativos nativos usando JavaScript. Então você pode usar suas habilidades em JavaScript para criar aplicativo para formulários como iOS e Android. E eles são realmente aplicativo nativo. Eles não são aplicação web que são responsivos, que eles estão trabalhando na área de trabalho e também no telefone celular. Estamos usando algumas habilidades CSS para torná-lo responsivo como um aplicativo para trabalhar no telefone. Não, eles são muito, muito nativos. Então, como você vê, podemos construir dois aplicativos usando uma linguagem, que é, ou por exemplo, um framework usando JavaScript, que funcionará no Android como um aplicativo nativo, no iOS como um nativo também. Então, a maioria das empresas hoje em dia estão indo para frente React Native porque nesse caso, você está economizando dinheiro para contratar uma equipe no iOS para saber, por exemplo, Xcode ou a linguagem que estão relacionados com iOS. E também para contratar outro tema que conhece Java, que também é usado para construir um aplicativo Android. Não, você precisa apenas contratar uma equipe que conheça JavaScript e noções básicas de reagir para criar dois aplicativos ao mesmo tempo usando o React Native. Então, dessa forma, a empresa economizará muito dinheiro. É por isso que está indo para a frente que ok, talvez você vai me dizer, ok, isso é perigoso, como como eu posso depender de JavaScript. E se o meu aplicativo é construído e tem muita segurança e ele deve ser preciso. Então eu preciso realmente construí-lo como nativo. Ok, eu vou dar a vocês um exemplo de melhores empresas usando React Native. Por exemplo, Facebook, Instagram, e também este acorde, céu, Pinterest, Tesla. Então, todas essas empresas estão usando hoje React Native para seus aplicativos em ambas as plataformas, Android e iOS. Dessa forma, você não precisa contratar muito conhecimento sobre iOS ou Android. Se você conhece JavaScript, garanto que você pode implantar alguns aplicativos back-end. Por exemplo, sibilos saber NodeJS, e também aplicativo móvel usando Reagir nativo e reagir. 4. Expo CLI ou React Native: Tenho certeza que quando você estava lendo sobre React Native, você ouviu sobre exportação. Exportar também é interface de linha comum para construir projetos de React Native. E está fornecendo muitas ferramentas e componentes que estão prontos para serem usados no React Native. A principal diferença entre React Native e export está na estrutura de código. Por exemplo, como você vê à esquerda, temos um projeto React Native. E vemos que temos duas pastas que contém projeto Android e iOS. Este é o projeto que o projeto real do Android, que está dentro dele, java ou Katlyn. E também temos o iOS, que é escrito com um rápido. Então, neste caso, quando você cria um projeto React Native, você também está criando o projeto Android e iOS. E desta forma você terá acesso em seu projeto a esses módulos dentro do Android e iOS. Isso dá ao React Native CLI, a realidade de usar as bibliotecas nativas. Mas na Expo, você gerará apenas um projeto JavaScript muito puro, e você pode usar apenas o JavaScript aqui, porque a exportação é usada também para construir suas próprias bibliotecas nativas e seus próprios componentes nativos. Muitas pessoas hoje em dia preferem usar React Native. React Native é mais estável e mais eficiente. E vamos ver quais são os benefícios da React Native Expo é para iniciantes, como vou dizer-lhe no final desta palestra. Então, se formos para o React Native CLI, você pode adicionar módulos nativos que são escritos Java, Objective-C, também com o rápido. Além disso, você pode adicioná-los diretamente ao seu projeto. E você pode usá-los em JavaScript como uma biblioteca JavaScript. E também configurar nosso projeto é fácil e pode ser feito em um minuto. Mas é claro, configurar o ambiente leva um pouco de tempo. Mais bibliotecas terceiras são suportadas. Você terá um monte de terceiros bibliotecas escritas com React Native CLI, e vocês, você-los em seu projeto. O maior benefício e o bom benefício do React Native CLI que você tem menos tamanho de arquivos de produção. Por exemplo, se você tiver compilando um aplicativo com o React Native CLI, você verá que você tem, por exemplo, dez megabytes do arquivo APK e também para o iOS, tudo bem. Mas quando você constrói um projeto com expo, esse arquivo ou aquele arquivo de produção será muito maior e tem principalmente 60 ou 70 megabytes em peso do React Native CLI, que tem apenas 10 megabytes. Isso porque export também está adicionando os arquivos e os módulos e os componentes assinam o arquivo APK para que ele possa ser usado no aplicativo. Mas aqui, quando estamos usando módulos nativos que já estão em seu sistema ou em seu telefone, então você não precisa ter um grande arquivo de produção também. Eu construí um projeto que é feito como um e-sharp construção e-commerce com exportação. E também há muitos cursos sobre Expo e não há tanto cursos sobre React Native CLI. Então eu prefiro fazer este curso com React Native CLI para ver o benefício na diferença entre ele e exportação. E, claro, se você quiser, você pode se inscrever no nosso curso que é falar e construir Ali com Expo, que está construindo um E-sharp no telefone celular. Então aqui, há alguns como recomendação do projeto React Native. Como você vê, ele diz que se você é novo em desenvolvimento móvel, a maneira mais fácil de começar é com a expo CLI. Mas se você já estiver familiarizado com o desenvolvimento móvel, talvez queira usar o React Native CLI. Ok, talvez você vai me perguntar, você disse no início que eu não preciso de nenhum requisito de desenvolvimento móvel. Ok, sim, realmente Você não precisa, por exemplo, para este projeto que vamos construir, você não precisa de tantas habilidades em desenvolvimento móvel. Vou ensinar-lhe as coisas mais importantes, como importar módulos, bibliotecas nativas, e usá-los em seu projeto. É isso. Não vamos editar muitas coisas nas bibliotecas nativas. Vamos chamá-los para o nosso projeto. E, claro, não há um bom benefício de como usar React Native CLI que você precisa instalar Xcode ou Android Studio para executar seu projeto em seu telefone. Mas desta forma, você garante que você está realmente testando sua ferramenta sem como um middleware que é construído de forma não nativa. Alguns dias atrás, eu perguntei sobre comunidade nativa React no Facebook, o que você prefere para o desenvolvimento de aplicativo móvel usando React Native? Na maioria das respostas e votos jogo com React Native CLI. E como você vê em algumas respostas de especialistas, eles disseram que exportação é como usar roda de treinamento para uma bicicleta, você vai eventualmente ter que tirá-los. E também, outra resposta foi, eu continuo vendo exportação é para iniciantes. E, claro, como eu disse, se você é um iniciante, você pode simplesmente se inscrever no outro curso onde estamos construindo E-Sharp. Então você não pode aprender realmente prático usando a Expo. 5. Como instalar nodejs: Ok, para começar a construir nosso ambiente, precisamos primeiro NodeJs. Nodejs é uma ferramenta para fornecer e instalar bibliotecas que precisamos para o nosso projeto instalar NodeJS Você só precisa ir para o site no js.org. E aqui você encontrará dois métodos de instalação. Um deles é os recursos mais recentes, que é chamado atual, também recomendado para a maioria dos usuários. Sempre, eu vou sempre para, recomendado para a maioria dos usuários, o que é como mais estável. E ele está me fornecendo as ferramentas mais importantes que eu preciso para meu desenvolvimento e que se encaixam com as bibliotecas mais atualizadas que estão disponíveis. E, claro, NodeJS está disponível para todos os sistemas, como não apenas para Windows ou Mac, está disponível para Linux, para todos os outros sistemas operacionais. Então você basta selecionar o seu e, em seguida, certifique-se de que você instalou aqui. Depois disso, abrimos a instalação e vamos como o próximo, próximo com ele, como instalar qualquer aplicativo e ele será instalado em sua máquina. Então é isso. Já o tenho na minha máquina e já o tenho instalado. Então não preciso instalá-lo novamente. Então, depois disso, você abre o terminal para que dez milênios você pode abri-lo como um terminal no Mac livro é, você pode abrir os aplicativos e você verificar se há terminal ou no Windows, você pode executar e, em seguida, encontrar linha de comando, que é chamado de linha comum, em seguida, a linha de comando padrão. E então você precisa verificar qual versão do Node.JS você possui. Então, a coisa mais importante que eu quero que você tenha certeza de que você tem a versão certa do Node. Então, caso contrário, você não será capaz de executar a maioria dos comentários se você tem versão antiga, como podemos saber a versão que temos após a instalação, podemos ir para o terminal como eu disse. E você coloca como nó menos v. E com isso, você pode ver a versão que você tem, é melhor desenvolver com React Native CLI para usar a versão que é 12 e acima. Portanto, certifique-se de que você tem a versão 12 e mais. E então você será capaz de codificar sem qualquer problema com o React Native CLI. 6. Como configurar o ambiente de desenvolvimento: Ok, agora vamos configurar o nosso ambiente. Eu aconselho você sempre a seguir a documentação que é fornecida por React Native formalmente. Então, quando você vai lá, você verá todos os passos que você precisa para a instalação do seu ambiente. Então, primeiro de tudo, você vai para React Native dot dev, e então você vai para os documentos. Aqui você verá algo que é chamado de ambientes configurados. E isso será atualizado, sempre com base nas versões, com base nos sistemas operacionais do Android e iOS. Com base nisso, você verá sempre deixar a documentação mais recente. Vou mostrar-lhe como podemos segui-lo. Primeiro de tudo, como eu disse, temos que seguir não Expo CLI, vamos trabalhar com React Native CLI, que é mais preferido pela maioria dos desenvolvedores móveis. Mas, claro, se você é um iniciante, eu prefiro que você vá para o meu curso que está relacionado com o trabalho com a Expo. E eu construí lá todo o ambiente que você precisa para trabalhar com especialistas. Mas agora vamos trabalhar com o React Native CLI. Então vamos para o sistema operacional. O sistema operacional, como você vê, está disponível para Mac OS, Windows e Linux. Vou trabalhar aqui com o Mac OS. Claro, você também pode seguir o Windows. Todos eles são iguais, mas com pequenas diferenças como configurar os buffers que queremos para executar nossos comentários. Mas como eu disse, é sempre melhor seguir a documentação para as versões. , você precisa direcionar também o sistema operacional para o qual você vai implantar. Claro, vamos trabalhar com Android e iOS ao mesmo tempo. E ambos têm uma instalação diferente. Vou começar agora com o Android. Então, primeiro de tudo, vamos para o Mac OS, então vamos para o Android alvo, e então instalamos as dependências como temos aqui, um nó. E precisamos instalar outras coisas, que eu vou explicar detalhadamente. Então, antes de tudo, vamos trabalhar com o Android, como você vê aqui na documentação e na palestra. Depois disso, vamos trabalhar com o iOS para ver como também podemos executar o iOS. Infelizmente, como no Windows, quando você quer trabalhar no Windows e você tem iOS, você não pode suportar a implantação ou desenvolvimento de aplicativos iOS. Isso porque esse aplicativo iOS precisa executar algo chamado Xcode. E Xcode é necessário e só está instalado no sistema Mac. Então, para isso, estou usando às vezes uma VM, máquina virtual VMware. Estou instalando o Mac OS no meu Windows e, em seguida, posso trabalhar com o iOS. Desse modo. Se você não tiver o MacBook, poderá instalar a máquina virtual. Há muitas maneiras de executar uma máquina virtual. Basta Google e você vai encontrá-lo imediatamente e você vai ver como você pode instalar Máquina Virtual de Michael S no Windows. Então é por isso que estou fazendo este curso com o macOS atualmente. Então é mais geral. Assim, podemos trabalhar com Android e iOS em seu mesmo tempo. Então, na próxima palestra, eu vou mostrar a vocês como podemos iniciar a instalação para sistemas Android. 7. Como configurar o Android: Ok, nesta palestra, vamos falar sobre como configurar nosso ambiente Android. Então, em primeiro lugar, vamos, como dissemos à documentação deles, e depois vamos ao Mac OS e depois ao Android. E no Android há uma ferramenta que é chamado de Brew Homebrew, que está ajudando para a instalação do aplicativo ou algumas ferramentas facilmente para o seu sistema Mac. Então, se você não instalou Homebrew, É melhor instalá-lo. Isso irá ajudá-lo a instalar muitos aplicativos sem se preocupar em encontrar a instalação para isso. Então, para isso, por exemplo, Eu quero instalar Node como eu mostrei anteriormente, Eu só ir para o meu terminal e eu executar brew instalar Node, como eu disse anteriormente. Então, se você vai aqui você vê que brew instalar Node e também há uma outra ferramenta que é chamado homem relógio. Esta é uma ferramenta muito boa. É feito pelo Facebook. Ir para assistir suas alterações em seu sistema de arquivos. E é altamente recomendado porque é melhor desempenho para o seu aplicativo e observar as atualizações nos arquivos. Então vamos tentar instalar isso porque antes já instalamos NADH, como eu mostrei, meu normalmente sem uma bebida, mas agora eu vou instalar isso com hebraico. Então, após a instalação do Homebrew, exatamente o mesmo. Basta copiar o comentário para o terminal e você terá Homebrew. Depois disso, você será capaz de usar seu comentário azul, assim você pode instalar qualquer programa que está disponível nesse pacote. Então vamos tentar, por exemplo, instalar watchman. Então eu vou para o terminal e, em seguida, eu vou colar brew instalar vigia. E então vamos aguardar a instalação. E vamos ver que ele está instalando todo o programa para mim, incluindo o caminho está incluído, todas as informações que são necessárias para o desenvolvimento para usar esta ferramenta. Ok, como você vê, essa instalação tinha sido feita. Então eu estava pulando o vídeo porque leva algum tempo. Então agora está instalado. Vamos voltar à documentação e ver o que temos aqui. Então também, precisamos para isso um Kit de Desenvolvimento Java. Isso é necessário para sistemas Android. Por isso, precisamos também de instalar isso. A mesma coisa. Nós estamos indo para copiar este comando que é chamado de instalação de brew. E então podemos ver Open JDK, que é necessário para isso. E eles disseram que se você já instalou o GDK em seu sistema, apenas certifique-se de que você tem o JDK 8 ou mais recente. Então você tem que ter certeza de que você tem a versão 8, mas vamos instalar isso com também homebrew. Então eu vou colar este comentário novamente e esperar para a instalação como vimos anteriormente com um Watchmen. Às vezes, quando você precisa de alguns privilégios para administrador, ele está pedindo a senha. Então você só precisa colocar a senha para o seu sistema Mac, então ele será instalado facilmente para o seu computador. Então, como você vê aqui, que ele foi instalado com sucesso. Então vamos novamente para o próximo passo. Então temos aqui após essa instalação do Android Studio, Android Studio, não vamos usá-lo como editor, mas precisamos do SDK dele. Precisamos SDK, plataforma SDK, e também dispositivo virtual, porque precisamos também ver nossas mudanças no aplicativo, como qualquer aplicativo que você executá-lo no Android. Precisamos ver nossas mudanças em algum formulário, algum telefone virtual. Então, é melhor instalar o Android SDK. E também o SDK é necessário como uma parte de módulos do React Native porque, como dissemos, o anúncio nativo está usando os módulos que estão disponíveis em projetos Android e iOS, como explicamos anteriormente. Então, antes de tudo, precisamos instalar e baixar o Android Studio. Então, para instalar o Android Studio, é também o mesmo processo onde você precisa baixar Android Studio. Ele também está disponível para todos os sistemas operacionais como, por exemplo, Windows e Linux, e também Chrome OS para todos os sistemas operacionais. Por isso, é melhor escolher o que é adequado para o seu sistema e em seguida, você baixá-lo e o processo de instalação é muito fácil você basta ir em seguida, em seguida, em seguida, você, ele será instalado em sua máquina. E nós vamos executar o Android Studio e temos que especificar algumas opções como vou mostrar-lhe. Então, como você vê aqui, eu tenho o botão Download. Demora cerca de 900 megabytes. E depois disso, você instalá-lo e, em seguida, executar o aplicativo. Já o tenho instalado no meu sistema operacional. E quando você executar o Android Studio, você vai ver esta janela como você vai precisar para criar um novo projeto e você bloqueou ou projeto, ou você quer, bem para alguns outros tipos de projetos? O que precisamos fazer aqui para ir para Configurar, e aqui vamos trabalhar como as instruções de configuração do desenvolvimento. Usando React Native. Então vamos lá. Como você vê aqui, ele diz como instalar o SDK Android. Então, depois que temos que ir para o, você vê esta janela, precisamos clicar em Configurar. E, em seguida, como eles vieram gerente e como eles vieram gerente é sempre atualizado aqui. Você tem sempre que seguir as versões que estão disponíveis aqui. Então, é melhor instalá-los exatamente como eles são descritos aqui sempre. Então, quando você vê uma versão diferente na documentação, então este vídeo, você tem que seguir essa documentação também. Então eu vou para a configuração, eu vou para SDK Manager, e então nós temos que verificar se temos Android Q. Então precisamos instalar este, como você vê aqui. Então primeiro precisamos ter o Android 10. Q, é claro que você também pode verificar o padrão instalado, porque quando você instala o Android Studio oito vem por padrão com este. Então, é melhor seguir essa documentação e dizer Android 10. Q. Ok. O que mais? Ele diz que você precisa ter certeza de que os itens a seguir estão verificados. Então, precisamos expandir este Android 10 e verificamos a plataforma Android SDK. Então, como podemos fazer isso? Você vai novamente para esta janela e, em seguida, você diz detalhes do pacote certo. Então, quando clicamos em Mostrar detalhes do pacote, veja mais detalhes sobre isso. Então ele nos diz, certifique-se de que a plataforma Android SDK 29 está disponível ou marcada. E também como você vê aqui, temos outra coisa que é a imagem do sistema Intel X86 atom 64. Por isso, também temos de verificar esse. Você vê que é por padrão não está marcada, então precisamos verificar isso também. Portanto, é importante verificar os detalhes do pacote Sharp. Você será capaz de ver todos os detalhes do pacote também. Há algo mais que precisamos ter certeza de que o Google API, Intel X86, sistema átomo. Também temos de verificar isso. Então, quando nós vamos aqui, então nós temos este, então é muito importante seguir essa recomendação. Em seguida, diz que selecione as ferramentas SDK e marque a caixa, Mostrar detalhes do pacote também, e expanda ferramentas de compilação do SDK do Android. Então vamos fazer isso. Então vamos aqui e, em seguida, vamos para ferramentas SDK, e então vamos aqui e novamente dizemos verificar pacotes como retrocede show detalhe do pacote. Então vamos ver como alguma versão, digamos qual versão diz que precisamos selecionar, certifique-se de que você tem 2902. Então temos que ir aqui e verificar 2900 para ter certeza de que você instala este pacote também. Claro, você tem liberdade para manter tudo isso, tudo que você pode removê-los com base no espaço que está disponível em sua máquina. Depois disso, selecionamos tudo. Como você vê aqui, clicamos em Aplicar. Então, selecionamos tudo como documentação. Clicamos em Aplicar e ele vai instalar as coisas que selecionamos. Instalado, nossa estimativa é de dois gigabytes. Então você tem que ter certeza de que você tem realmente o espaço porque eles são grandes e você tem que ter certeza de que tudo está instalado corretamente, porque vai demorar cerca de 88 gigabytes. Então, clicamos em Ok, e ele vai baixar todas as coisas. Estou indo muito rápido este vídeo para você não demorar tanto tempo. Ok, essa instalação agora bem sucedida, e como você vê aqui, temos o Android 10 como requisito está instalado, e também as ferramentas SDK, como vimos anteriormente. Se formos mostrar-lhe pacotes, certificamo-nos de que tudo foi instalado conforme descrito na documentação. Ok, clicamos em Ok, vamos embora do Android Studio e, em seguida, vamos para o próximo passo onde é escrito configurar variável de ambiente doméstico Android. E no Mac, você faz isso de forma diferente do Windows. Então, precisamos ter certeza de que os comentários do Android estão funcionando bem no meu computador. Então depende do tipo de seu terminal. Eu estou falando agora sobre Mac, ok, Então, se você quiser ver o Windows, você pode pular um pouco o vídeo que eu vou mostrar-lhe no Windows. Então, primeiro para Mac, você precisa adicionar as seguintes linhas ao seu perfil de bash de casa. E aqui precisamos editar este arquivo e adicionar essas linhas. Então, antes de tudo, precisamos ter certeza de que realmente instalamos o Android SDK nesse caminho. Então, como podemos fazer isso? Primeiro você vai para o Finder no Mac e, em seguida, você clica em Ir e, em seguida, você verá sua biblioteca. Então, quando você clica na biblioteca, ele vai abrir para você a biblioteca no Finder. Então você pode encontrá-lo aqui. E você vai ver que há pasta android, e dentro desta pasta android há SDK. Então aqui o que precisamos ter, então temos certeza. Temos realmente esta biblioteca casa banho, Android SDK. Ok, então isso é tudo legal. Então temos agora dois tipos de terminais no Mac. Então, como você vê aqui, eu estou usando o que é prefixado com Zed SH. Então este é o meu terminal que estou usando para meus aplicativos. Então você pode fazer os passos ousados, o que eu vou fazer agora. Então, para ter certeza de que todos os seus terminais funcionam bem. Então primeiro eu vou editar o perfil de bash home dot. Então, como podemos fazer isso, eu vou abrir o terminal novamente. E como você vê, eu tentei anteriormente, Eu tenho um comentário que é chamado sudo nano e, em seguida, editar alguma multa. Então eu vou colocar este comentário novamente. Então por que eu tenho sudo? Porque eu tenho sudo porque eu preciso de permissões para isso. Não é possível editar este arquivo sem privilégios. Nano é editor, que é instalado internamente no sistema Mac ou terminais. Então você pode editar arquivos através dele. Então você não pode dizer sudo nano como dizemos aqui. E ele abrirá o arquivo para você e, em seguida, você precisa exportar e copiar e colar o que está escrito na documentação. Então vamos copiar tudo isso como vemos aqui, e então voltar para aquele terminal novamente e colá-los aqui. Está bem, Legal. Temos todos eles. Depois disso, você precisa sair, você precisa sair. Então aqui há alguns atalhos. Você precisa dizer que precisamos controlar X. Então você precisa pressionar Control X no Mac. E ofereceria que salvasse, modificasse, modificasse o buffer. Então você pode dizer, sim, eu quero salvá-los. Então, depois que o nome do arquivo para escrever, que ele vai pedir-lhe, substituir isso. Então, basta pressionar Enter e ele será salvo para certeza de que você pode ter todas as edições feitas. Basta clicar novamente. Você vai ver isso. Abriu o comentário novamente. Você vê que todos eles já. Então eu vou de novo, eu controlo. Volto para a linha de comando ou terminal. Eu vou para o próximo comentário onde eu estou usando zed como editor de borda para que possamos, em seguida, editar este arquivo. Então você vai para o terminal e exatamente o mesmo sudo nano e o mesmo, e então você cola isso e ele vai abrir para você novamente, algum editor você pode exportar também os incômodos que são necessários aqui. Então, novamente, precisamos copiar todos esses comandos e ir para o terminal. E então nós baseamos esses. Podemos dizer aqui, você pode colá-los sob ele e, em seguida, você pressionar Salvar, ou você pode dizer Control X para salvá-lo exatamente como fizemos anteriormente, ok, substituir os dados e tudo é salvo bem. Então, para ter certeza de que nossa linha de comando está aceitando que você só precisa executar este comando que é chamado Echo Android home. Então vamos novamente para o terminal e, em seguida, colamos este comando e você verá que ficamos vazios. Isso ocorre porque você precisa reiniciar o terminal para ver as alterações que são feitas em seu, em seu terminal. Caso contrário, se isso ainda não funcionar, você precisa verificar novamente esses perfis SSID como vimos anteriormente, e certifique-se se você tem o caminho de exportação no final. Então, esquecidamente, você vê aqui, eu fiz isso, foi como aqui. Então este caminho de exportação estava aqui. Então eu só movo para baixo para estar do fim para o último. Então, nesse caso, podemos exportar todos os ônibus que são definidos aqui. Então, apenas certifique-se que isso é como solução de problemas. Você pode fazer. Assim, você pode se certificar de que seu terminal está funcionando. Então eu vou fechar este terminal e abri-lo novamente para ver se eu sou realmente capaz de ver o caminho Android Home. Então fechamos abrimos o terminal de novo. Eu faria um zoom. Então eu vou colar o comando eco Android Home olhos como você vê, eu tenho isso. Agora o caminho como eu estou copiando ou ecoando isso, imprimindo o comentário ou o caminho que é salvo no meu arquivo de comentário, que é para z como h. Então aqui, como você vê que tudo está funcionando bem embora temos certeza de que Os nossos parceiros estão bem aqui. Então está escrito aqui que você pode ter certeza de que tudo está funcionando bem. Então, depois disso, há React Native tem interface de linha de comando. Veremos este passo depois de terminarmos também para iOS. Então, vou manter este passo por enquanto. Para o Windows. Se eu for para o Windows, definindo o caminho, muito fácil, vá para variáveis de ambiente que são definidas no Windows. E está tudo explicado aqui. Então, basta ir para o Painel de Controle e, em seguida, contas de usuário. E, em seguida, contas de usuário novamente, alterar minha variável de ambiente. E você precisa adicionar o caminho que está instalado em sua máquina para Android SDK, normalmente ele vem de usuários, e então você nome de usuário vem aqui, e então AppData, Local Android SDK, é isso. E você precisa ter certeza de que todo esse caminho é o nosso conjunto bem. Então você precisa abrir o PowerShell ou linha comum, copiar e colar bom item filho e, em seguida, verificar se e Android Home é adicionado. É exatamente como nós nos certificamos de que temos variável Android Home está definido. Então esta é uma maneira de configurar o ambiente Android para Windows e Mac. Em seguida, vamos explicar sobre iOS. E depois disso, infelizmente, como eu disse que o iOS só está disponível no Mac, então eu vou explicar isso apenas no mapa. Não teremos explicação para Windows ou Mac OS e também para o sistema iOS, que estará na próxima palestra. E depois disso, vamos começar o nosso React Native ou primeiro agir aplicativo nativo. 8. Como configurar a IOs: Ok, nesta palestra vamos falar sobre instalação para Desenvolvimento Ambiental para sistema iOS. Então, temos trabalhado com macOS, android, e eu vou mudar para o sistema iOS. Instalar para sistema iOS é exatamente os mesmos passos como fizemos anteriormente com Watchmen e As outras ferramentas. Mas precisamos também de instalar algum aplicativo foi chamado Xcode? Xcode está disponível na Mac App Store, e quando você instalá-lo, apenas certifique-se de que você tem a versão dez e um novo pedido. Então esta é a informação mais importante que você precisa saber. Após a instalação de seu Xcode, há algo que é chamado como você tem que verificar suas ferramentas de linha de comando. Então, após a instalação, instalei o Xcode anteriormente por conta própria, meu sistema operacional. Eu vou para o Xcode e clique em Preferências. Então, quando você vai para Preferências, você verá aqui como algumas, algumas guias. Uma delas é a localização. Apenas certifique-se de que a ferramenta de linha comum está selecionada, que Xcode baseado na virgem que você instalou. Então, depois disso, precisamos instalar também. Simulador. simulador existe em componentes. Então, quando você vai para componentes, você precisa instalar algum simulador. Estou instalando agora o mais recente simulador da versão iOS para telefones celulares do iOS. Então eu estou instalando 14.4. Claro, quando você vê versão superior é melhor instalá-lo. Assim, seu aplicativo pode funcionar com a versão mais recente dos sistemas iOS. Portanto, normalmente esses tamanhos estão disponíveis aqui. Você também precisa ter espaço no seu PC. Dois, obedeça ao tamanho do simulador. Depois disso, vamos para o próximo passo. Após a instalação, os Cocoapods, barcos de cacau é como a instalação Ruby e está disponível para Mac OS. Ele está nos fornecendo um monte de como dizer bibliotecas para iOS ou pacotes para iOS, você tem opcionalmente você pode instalá-lo. Então eu vou também instalá-lo através deste comentário, vou abrir meu terminal e então eu vou colar este comando aqui. E então ele vai me pedir uma senha. Vou colar minha senha também. E vai instalar para mim algo chamado Cocoapods. Se você quiser saber mais sobre isso, há como um link aqui. Você pode verificar. Então você vai para Cocoapods. Há muitos pacotes e bibliotecas para projetos Objective-C, então você pode tê-los para seus aplicativos. Falaremos sobre isso mais tarde, quando vamos usar esses Cocoapods em nosso curso. Mas atualmente vamos usar componentes nativos do React, mas é melhor usar isso. Então, para obter mais informações, você pode dar uma olhada neste link. Você pode ver Introdução ao CocoaPods. Você também pode instalá-lo como instruções, que temos aqui, mas atualmente não precisamos dele. Precisaremos mais tarde. 9. Editor de códigos: O editor que vou usar neste curso será o Visual Studio Code. Como eu disse, instalamos o Xcode e instalamos também o Android Studio, mas não vamos usá-los como editores. Vamos usar o Visual Studio Code, que é muito rápido e dinâmico e é muito bom para o desenvolvimento de um React nativo. Então, como você vê aqui, temos um código V ponto Visual Studio.com. Você vai aqui e, em seguida, você clicar no download mac universal, e você terá a versão para Mac. E também, se você clicar nesta seta, você verá outra versão para Windows e Linux. Assim, a instalação do código do Visual Studio acabará com instalação do código do Visual Studio em sua máquina e você terá algo parecido com isso. Então, na próxima palestra vamos ver como vamos adicionar algumas extensões para embrulhá-lo nossas habilidades de codificação no Windows, ou será arquivo de instalação normal e também no Mac você pode instalá-lo e ele será baixado como um arquivo zip. E quando você abrir o arquivo zip, ele será extraído e você terá seu aplicativo ponto do Visual Studio Code. Assim, você pode mover esse aplicativo para seus aplicativos no Mac OS. Então ele será localizado aqui. Já o instalei, então não preciso fazer isso. Então, como você vê aqui, temos aplicativo de código do Visual Studio, e quando você abri-lo, você verá que o editor do Visual Studio instalado em sua máquina. Então, como você vê aqui, eu tenho aqui meu Visual Studio Code está instalado na minha máquina. Para o Windows, será exatamente o mesmo, mas serão arquivos executáveis para que você possa instalá-lo como qualquer aplicativo no Windows. 10. Como instalar extensões para programação rápida: O Visual Studio Code vem com extensão extra que você pode instalá-los para algum comportamento específico do código do Visual Studio. Então, para visitar as bibliotecas ou similares, por exemplo, seu mercado para essas extensões, você só precisa clicar em Extensões no Visual Studio Code. Como você vê aqui a partir deste ícone, vou clicar nele e, em seguida, você verá um monte de extensões sugeridas. Então vamos procurar primeiro a nossa primeira extensão, que será Reagir ferramentas nativas. E esta extensão é muito útil para o nosso aplicativo React Native como veremos mais tarde. Então, por exemplo, ele vai nos ajudar a criar como alguns trechos. Então, como você vê, é muito útil e está embrulhando nosso revestimento. E ele tem um monte de recursos como autocomplete das coisas. Então, o que veremos o benefício desta extensão mais tarde, mas agora vamos instalá-lo. Então eu clico na instalação e ele será instalado em minhas extensões. Outra extensão que precisamos instalar também para acelerar o nosso desempenho é chamado React Native, reagir slash Redox snippets para ES6, ES 7. Então isso vamos usar neste curso. Então, o que é essa extensão? Este é como fazer para nós alguns atalhos que podemos escrever e irá gerar para nós o código completo. Por exemplo, como você vê aqui, Eu tenho algumas importações, por exemplo Irã EMR, e então ele vai ser executado, ele vai codificar para mim importação Reagir de reagir. Então é como um atalho que podemos escrever e ele vai importar para nós com base nas coisas. Por exemplo, eu tenho IM, RPC, ele vai importar para mim um componente puro de reagir. Então são alguns atalhos que precisamos usar como veremos mais tarde no curso. E isso vai acelerar a produtividade. Extensão, que precisamos instalar é chamado mais bonito. Prettier é como uma extensão muito agradável que é usado para formatação de código. Então, quando você salvar um arquivo, ele irá formatar automaticamente o seu código com base em alguma configuração que virá com instalação React Native como veremos mais tarde. Então, primeiro, você só precisa instalar esta extensão e certifique-se de que você tem a opção que é chamada segura ou formato em Salvar. Então, como você pode encontrar esta opção, você só precisa ir para as configurações do VS Code. Então, basta ir para o código e, em seguida, você selecionará Preferências e, em seguida, configurações. Então, quando você clica em configurações, você pode encontrar algo chamado formato em Salvar. Então esse é o comentário. Então você só precisa ter certeza de que o formato em Salvar, esta opção é ativada caso contrário, o formato no cofre não funcionará para você. Então é isso por enquanto. Vamos ver como usaríamos mais bonita. Como eu disse, ele será instalado automaticamente essa configuração com um projeto React Native. A última coisa ou a última extensão de que precisamos é algo como opcional. Se você quiser, você pode instalá-lo ou não. Chama-se material e depois Icon Theme. Então isso é como dar a você, como quando você tem uma estrutura de arquivos, ele vai colocar os ícones dos arquivos com base no tipo do arquivo. Então, é melhor também instalá-lo para fazer como muito confortável para a lista de arquivos que você tem aqui. Após a instalação, ele lhe dará selecionar Arquivo ícone Tema. Você só precisa usar este. Então eu vou usar Material Ícone Tema ou seti. Vamos usar este. E então você verá como sua lista de arquivos B com ícones específicos dos arquivos no editor. Então esses ícones, você os vê, por exemplo, assim. Assim, cada arquivo terminar com CSS, ele terá um ícone como este. Cada arquivo terminar, por exemplo, com MPM terá assim, JavaScript e et cetera. Então, todos os ícones estão disponíveis, que tornará para você fácil dar uma olhada sua estrutura de arquivos e pegar o arquivo que você quer, as extensões que precisamos para agora, vamos construir o nosso primeiro ou um projeto React Native, e veremos toda a eficácia de todas essas extensões mais tarde. 11. Crie um projeto nativo do React: Ok, Agora estamos prontos para iniciar um novo aplicativo com React Native. Na documentação, há uma ferramenta que é chamada MAX, que fornece capacidade de criar aplicações como placas de caldeira. E este MPS faz parte da MPM. Ele vem sempre com a versão mais recente do Node. Portanto, certifique-se de que você tem a versão mais recente do Node instalado. Então, quando executamos este comando, vamos criar um novo projeto em React Native. Então, para ter certeza de que tudo está funcionando bem, Vamos executar este comentário. Primeiro de tudo, vou para o meu terminal. Então, se você se lembra, temos este terminal ou linha de comando que pode estar disponível no Windows. Portanto, certifique-se de que está na área de trabalho ou em qualquer pasta onde preferir, por exemplo, no disco rígido. Então aqui eu usei a área de trabalho, então eu vou usar esta pasta para criar meu projeto. Então eu vou copiar este comando como você vê, como MPI x React Native nele. E, em seguida, você especifica o nome do projeto com o qual você vai trabalhar. Então vamos tentar isso. Então eu vou primeiro para o terminal e depois vou colar este comando, mas eu vou dar, por exemplo nome. Podemos dizer projeto de curso. Assim como por agora, para ter certeza de que tudo está funcionando bem para nós, é melhor ter sempre como as letras maiúsculas do, como o nome do projeto. Então podemos ter um projeto de curso como este. Então agora vou pressionar Enter. E então ele vai criar para mim na área de trabalho uma pasta onde será chamado projeto de Gore. Se eu for para a minha área de trabalho, como você vê aqui, ele vai criar para mim um novo projeto. Mas esse processo vai levar um pouco de tempo porque ele vai baixar alguns recursos para criar o projeto. Então, como você vê aqui, seu próprio progresso. Vou pular este vídeo porque leva cerca de cinco minutos. Então eu vou pular este vídeo e eu vou mostrar a vocês quando ele estiver pronto. Então, como você vê aqui, essa instalação está feita. Então baixando alguns modelos, copiando modelo processando o modelo e, em seguida, alguns Cocoapods, as dependências como vimos anteriormente. E aqui estão algumas instruções para executar o projeto no Android e também instruções para executá-lo no iOS. Então, agora como você vê aqui, está instalado, se eu ir agora para a minha área de trabalho, eu vou ver o projeto já está aqui. Então, como você vê isso, eu ouvi que eu tenho aqui esse projeto de curso. Então vamos para o Visual Studio Code e abrir o projeto lá. Então, como você vê, temos aqui essa pasta e podemos clicar neste explorador de pastas ou Explorador de Arquivos. E então você verá ícone ou botão, que é chamado Abrir pasta. E aqui vamos abrir a pasta do nosso projeto onde temos localizado na área de trabalho. Então eu vou aqui, projeto do curso, e eu vou abrir esta pasta como você vê aqui. Então, se você der uma olhada, teremos todo o arquivo aqui, então estamos prontos para programação. Vamos dar uma olhada rápida através da estrutura de arquivos do projeto. Vamos começar de cima para baixo. Então, primeiro teremos um teste, que será como um arquivo de teste para testar o aplicativo como teste de ponta a ponta ou teste de unidade, que será criado aqui também. Vamos ter um código VS sentado. Portanto, sempre que você quiser ter uma configuração, configurações específicas com seu projeto, você pode adicionar essas configurações do Visual Studio Code se toda a equipe estiver usando o Visual Studio Code. Por exemplo, o tamanho da fonte do código, como você vê aqui. Assim, você pode substituir suas configurações que padrão no seu editor pelas configurações que são especificadas dentro deste arquivo ou desta pasta. E veremos isso mais tarde. E agora temos o projeto Android. Este será um projeto Android puro, por isso será escrito em Java. Você vai ver aqui Gradle, nós não vamos lidar ou trabalhar com este projeto, porque como eu disse que React Native está interagindo com Android e iOS projeto para gerar para nós um aplicativos nativos. Então nós não estamos indo para trabalhar tanto com essas duas pastas apenas quando queremos adicionar ou excluir alguns módulos específicos, como eu vou mostrar-lhe mais tarde, módulo nó é as bibliotecas Node JS. Então, onde vamos instalar as bibliotecas em JavaScript que precisamos para executar nosso projeto. Por exemplo, se você abrir esta pasta, você verá que você tem biblioteca nativa do React. Você tem TypeScript, você tem um monte de bibliotecas que são necessários para Duran este projeto, buck config é algo como para Maven é um servidor que pode ser executado para Android. Então também vamos trabalhar com ele se precisarmos. Editor Config é algo como, se você se lembra, eu falei sobre um mais bonito. Você também pode definir alguma configuração para o seu editor no como aqui. Você pode ter uma configuração para este editor, mas ele será substituído pelo gelo mais bonito RC como eu vou falar sobre isso mais tarde. Es fiapos também é algo importante para o projeto. Es lint é uma ferramenta que vem com uma extensão se você quiser, você pode instalá-lo, que é chamado ES fiapos. E quando você instala ES lint, ele mostraria que você vive os erros de código que você tem em seu projeto. Por exemplo, se eu for aqui para ArcJS, eu vou ter algum erro, que está me mostrando que, ok, há. Isso pode ser usado apenas no TypeScript, mas não pode ser usado no arquivo JavaScript. Refiro-me à importação. Então, nesse caso, você pode pular essa regra. Você pode editar a regra no arquivo Eastland RC. Então ES lint RC arquivo é um arquivo onde contêm as regras para o seu código. Então, nesse caso, ok, é um projeto será executado, mas você terá algum erro de digitação. Por exemplo, se eu colocar aqui aspas duplas, É, o projeto não vai gostar. Ou o agente da ESA não vai gostar. Ele vai dizer, é melhor ter uma única cotação como está definido nas regras do projeto. Então, para olhar mais ou sobre ES fiapos, você pode simplesmente ir para ES fiapos e você não pode verificar as regras. Há muitas regras que você pode definir para o seu projeto. Então, por exemplo, vou pegar um deles. Por exemplo, nenhum console, log do console é pesado para o navegador quando você esquecê-los, quando seu projeto, o projeto será executado com log do console e, em seguida, ele fará para você alguns problemas de desempenho. Portanto, é melhor sempre remover o log do console do projeto. Aqui há uma lei ou regra para Eastland. Sempre que houver um log do console, ele aparecerá sob ele erro. Então você tem que mostrar que, ok, por favor remova o registro do console. Então, quando você quer trabalhar em uma dessas regras, por exemplo, como vemos aqui que pegamos esta, eu só vou aqui e verifico no final algo chamado Regras. E, em seguida, você pode especificar a regra que é chamada nenhum console de todos, você pode defini-lo como um ou 0. Então, em React, podemos usar isso também, essas regras. Então, se você vai para o seu projeto e ir Eastland RC, você só precisa adicionar um campo que é chamado de regras. E essas regras serão um objeto. E dentro deste objeto você coloca seu papel. Por exemplo, vou colocar que nenhum console, como você vê aqui, por exemplo, se formos e copiarmos este, então vamos dizer tudo que não teremos console. Então aqui nós colocamos este, mas como dissemos, isso vai gostar apenas de citação única. Então, colocamos em aspas simples. E dizemos aqui que, como ligá-lo para mim ou este console de erro, ligue-o. Quando você salvar. Como você vê aqui, ele já está formatado, como eu disse anteriormente, porque nós colocamos em dizer formato. Um mais bonito já formatou para mim. Então, quando eu vou para o aplicativo, por exemplo, eu quero adicionar aqui um console, log de console. Então, podemos adicionar como algum log de console aqui, como você vê. Então, ele vai me dar a declaração de console inesperado erro. Então, é melhor ligá-lo. Lembre-se sempre que eu tenho erro de log do console no meu aplicativo. Então, se você quiser desativá-lo, basta ir novamente para a estrada e colocar aqui de como está escrito na descrição do projeto. E como você vê agora, o erro não está sendo exibido ou o aviso não está mais aparecendo. Então é isso. Assim, você pode especificar a regra que você deseja. Você tem que procurar regras. E então você pode fazer o que quiser com essas regras. E você pode tornar seu projeto estável e unificado em código de toda a equipe, que é, que está compartilhando a base de código. Então vamos dar essa regra, por exemplo, e vamos remover o log do console. E vamos continuar com o fluxo de estrutura fina Config. Você não precisa dele por enquanto. É apenas sobre como o fluxo de exportação e construção do projeto se comportará. Bons atributos também você não precisa dele por agora ser ignorado. Arquivo muito importante para onde você está indo. Por exemplo, quando você vincula o projeto a algum repositório Git, então você não precisa enviar alguns arquivos. Por exemplo, módulos de nó é muito enorme. Então é essa pasta cerca de 300 megabytes quando você iniciar um novo projeto React Native. Então você não precisa empurrar este código ou esta pasta para o repositório Git. Você só precisa empurrar as bibliotecas que você está reduzindo dentro de seu projeto. Então eu estou excluindo módulos de nó do bom para ser empurrado com meus commits e push para a base de código no GitHub. Mais bonita, como eu disse, há configuração mais bonita já configurando este mais bonito. E como você vê aqui, que temos pão aqui é definido aqui, ICC para baixo e ele irá mostrar-lhe sempre erros e as regras que estão seguindo com base neste arquivo até JSON é o arquivo que é ponto de entrada para o nosso projeto. Como por exemplo, podemos dizer a página inicial do aplicativo. Como veremos mais tarde, quando executaremos o aplicativo, veremos como tudo isso renderizado em nosso telefone e veremos como podemos editá-lo e ajustado para fazer nossa aplicação. E falaremos sobre esse arquivo mais tarde. Abc JSON é como algumas propriedades para o aplicativo, como o nome e nome de exibição. Assim, você pode adicionar uma propriedade que você deseja. Babel config é algo para ESR, ES6 anos cinco é um construtor que converte seu JavaScript ES6 anos cinco para JavaScript Vanilla. E você pode, o navegador ou qualquer navegador pode entendê-lo. Índice js. É também o principal ponto de entrada da sua aplicação. Então aqui o aplicativo é especificado ISA como índice dois anos quando eu comecei o projeto, ele vai começar a partir daqui, index.js. E eu especifico o nome do arquivo, que é chamado de nome do aplicativo. E aqui ele vai começar para mim o nome do aplicativo do aplicativo, que eu tenho que importado a partir daqui. Então, o app.js na verdade é chamado dentro do índice GS, que é a raiz, ponto principal raiz do seu projeto. E agora temos configuração metro, que está transferindo o projeto de JavaScript Bayes para uma base de código nativo como vimos mais tarde. E também é usado como compilador. E está mostrando os erros quando você está fazendo alguns erros no código. Quando estamos fazendo como pacote de desenvolvimento JSON é usado para bibliotecas que precisamos. Então, podemos instalar bibliotecas e remover bibliotecas também, como apenas bibliotecas JavaScript. Então, podemos adicioná-los ou removê-los com base no pacote JSON. E como veremos mais tarde, como vamos chamar várias bibliotecas que precisamos para construir nosso projeto. Portanto, esta é uma visão geral rápida sobre a estrutura de arquivos do projeto React Native. Veremos mais tarde mais e mais detalhes sobre todos esses arquivos. Primeiro, vamos construir nosso projeto. 12. Como executar no simulador do iOS: Ok, nesta palestra vamos ver como podemos executar o projeto no simulador iOS. Então, como você vê aqui, temos as instruções sobre o iOS que precisamos para navegar para o nosso projeto. E então temos que executar o comando npm, React Native, executar iOS. Vamos tentar isso. Mas eu tentaria do nosso VS Code ou Visual Studio Code. Nós não vamos usar esses terminais mais porque você sabe que o código VS continha já a linha comum que é usada para usar ou inserir comandos que precisamos para o nosso projeto. Ok, então vamos pegar essa recomendação e copiar esse comentário primeiro, e então vamos para o código do Visual Studio. Então, quando fechamos essa linha comum, vamos para o código do Visual Studio. Então, para abrir o terminal no código do Visual Studio, você deve apenas pressionar Control J no Windows ou Command J no Mac. Então vamos tentar isso. E você vai ver que você vai obter o terminal e o arquivo bash ou você pode ter tão bem o zed quanto NMAC. Então agora vamos colar o comentário que tínhamos anteriormente. Mas lembre-se, você já instalou o Xcode e também o simulador. Então vamos ver automaticamente que temos simulador que é será no iPhone. Então vamos tentar isso. Levará algum tempo para executar o projeto e incluir os pacotes. E como você vê aqui, ele está lançando o iPhone 12 é o simulador que eu instalei anteriormente, e agora ele está ficando carregando. Então, como você vê aqui, o simulador que lançou e agora estamos construindo o aplicativo. Então, o que temos aqui que o simulador ou o compilador tentando construir o projeto usando o projeto iOS, que criamos anteriormente usando nosso comentário nativo React. E como você vê, esse processo pode levar algum tempo, então você precisa ser paciente com isso. Depende da memória do seu PC e também do processador. Talvez você perceba que o ventilador do PC ficará mais alto e o processador ficará sobrecarregado, mas não há problema. Chegará quando tudo for lançado. Então, agora, depois que o projeto teve sucesso, como você vê aqui, nós abrimos para nós um novo terminal. E este terminal está nos mostrando que o projeto empacotado index.js foi executado. E como eu disse anteriormente, esse índice GS contém o ponto de entrada para a nossa aplicação. E como você vê aqui, nós temos todo o compilador, que é chamado Metro. E também aqui temos o simulador e o aplicativo que é padrão vem por reagir nativo boilerplate. Então agora, quando você está indo para fazer uma mudança no código, por exemplo, eu vou mudar este passo 1, esta frase para outra coisa. Então vamos lá para o código e encontrar em app.js, como eu disse, seria o ponto de entrada para o nosso projeto. Então, aqui o nosso app.js. Então, como você vê aqui, o determinante que abrimos anteriormente, é feito e fez seu próprio trabalho, então você não precisa mais dele aqui. Então, quando eu vou procurar o passo 1, não importa esse código, como você vê isso aqui. Eu vou explicar passo a passo, mas vamos mudar esta frase passo um aqui. Então eu vou mudá-lo, por exemplo, para Reagir metas nativas. E quando eu salvar, veremos que as alterações são imediatamente refletidas no telefone. E este aplicativo será um aplicativo realmente nativo. Ele é violado pelo metro para o projeto iOS para executar JavaScript no iOS e convertido em um aplicativo nativo, como você vê aqui. Então, toda vez que eu mudo algo, isso seria refletido aqui. Por isso, será muito útil para nós para a codificação. Você não precisa recarregar todo o aplicativo novamente porque isso é chamado de hot reloading. Então está refletindo diretamente as mudanças que vamos fazer. Então, quando estamos construindo o aplicativo, não precisamos recarregar em cada mudança que estamos fazendo. Então, basta salvá-lo e ele seria imediatamente executado aqui. Então esta é a maneira como estamos executando o aplicativo. Então, quando você estava lá é como, por exemplo, algum erro. Como vê, vou cometer um erro. Ele mostrará o erro diretamente aqui. Então, no próprio telefone, e também no Metro, aquele terminal que abriu automaticamente, ele mostrará a linha exata onde o erro aconteceu. Então você não precisa se preocupar com os erros. Assim, você não pode vê-los diretamente quando você pressiona Salvar e você já tem um erro. Então eu coloquei de volta e o projeto é executado novamente. Então, depois que você está se certificando de que o seu Xcode instalado e também você ter baixado como simulador como eu mostrei anteriormente. Agora somos capazes de executar o projeto de forma muito fácil e suave. Então, desta forma, você poderá executar o aplicativo no telefone iOS. 13. Como executar no Android: Ok, agora nesta palestra vamos executar nosso projeto no dispositivo Android. Este dispositivo será Emulador como um dispositivo virtual. Como fizemos exatamente foi dispositivo iOS. Então agora vou para a documentação do Android ou em execução no Android. Então, a mesma documentação que estávamos seguindo, eu quero dizer alvo Android. Então, agora, se descermos, veremos esse comentário onde vamos executar o projeto. Então nós criamos um projeto anteriormente, como você viu. Agora vamos executar o projeto em um dispositivo. Mas aqui há algumas instruções que temos que fazer primeiro. Então, primeiro de tudo, precisamos criar um dispositivo físico ou um dispositivo virtual. Nesta palestra, vou mostrar-lhe como criar um dispositivo virtual. Por isso, temos de seguir as instruções que estão escritas aqui. E também talvez eles se atualizem no futuro depois de gravar este curso. Mas agora você pode seguir esta instrução que existe aqui. Será sempre o mesmo para o futuro. Então, primeiro, vamos criar um novo AVD. É chamado de dispositivo virtual, dispositivo virtual Android. Então, primeiro vamos Android Studio, como você vê aqui, e clicamos em Configurar e depois AVD Manager, clicamos nele e teremos outra janela. E nessa janela, como você vê, você pode adicionar seus dispositivos como quiser. Portanto, há um dispositivo padrão que é usado em, já no Android Studio, mas vamos usar um padrão um ou um que é recomendado pela documentação React Native. Então eu vou clicar em Criar dispositivo virtual. E, claro, será uma forma. Claro, se você estiver desenvolvendo para tablet ou, por exemplo, automotivo ou TV, seria diferente, mas ainda assim o sistema operacional será o mesmo. Então agora vamos selecionar um desses dispositivos. Então eu recomendo, por exemplo, usar o Pixel 3 ou Pixel 2. Sem problema. Assim, você pode ter um dimensionamento adequado de sua aplicação. Então agora nós clicamos em Avançar. E, em seguida, como você vê na documentação, eles disseram que é melhor usar o sistema Q onde temos 29 imagem. Então, se formos para o Android Studio, temos que procurar imagens X86. Temos que procurar imagens. E então vamos selecionar aquele que é chamado Q. Este temos baixado anteriormente, como você se lembra, quando estávamos instalando o Android Studio. E depois disso, você clica em Avançar e dá um nome para este dispositivo. E você pode escolher se é paisagem ou retrato. Mas isso não importa. Pode alterá-lo durante o tempo de execução do dispositivo e, em seguida, clique em Concluir. Depois disso, você terá o dispositivo está aqui. Então agora precisamos executar o dispositivo que instalamos. Então, depois disso, podemos ir aqui e clicar no botão Play. Então, se você ver este botão Play, em seguida, ele vai, ele vai executar o AVD. Ele abrirá um telefone para você formulário virtual, exatamente como fizemos no iOS e a diferença aqui que temos que executar o telefone manualmente aqui. E então temos que esperar até que o telefone esteja decolando ou seja lançado. Então temos que fazer algo para executar nosso aplicativo no dispositivo. Então, como você vê aqui nós temos agora o dispositivo está funcionando, tudo está bem. Temos um telefone de verdade. Como você vê aqui, ele tem câmera, ele tem aplicativos, e é exatamente como um telefone real. Então agora precisamos executar o aplicativo que criamos anteriormente com React Native sobre este vínculo. O que temos que fazer primeiro, em primeiro lugar, eles estão recomendando para encontrar o dispositivo por AVD, ou linha comum do Android. Então, como podemos fazer isso? Então, para isso, precisamos ter certeza de que realmente o dispositivo está conectado ao Android. Quero dizer que React Native pode ver o dispositivo que podemos executar o aplicativo nele. Então, como podemos fazer isso, podemos abrir uma nova janela de terminal no código do Visual Studio e executar os dispositivos ADB comando. Então ADB é como a linha comum que criamos no, no início, quando estamos instalando o Android Studio. Então aqui, quando executamos o comando ADB, ele terá algumas opções. Um deles é dispositivos. Então, quando clicamos Enter, veremos que temos emulador 55, 54 dispositivo. Se você não vir nada aqui, você tem que se certificar de que você está executando o emulador. Caso contrário, você não poderá executar seu aplicativo com React Nate. Depois disso, precisamos executar o aplicativo usando e também como fizemos anteriormente com quando estávamos executando ou instalamos o aplicativo. Então, se você se lembra, tivemos este comando que é chamado MAX React Native executar Android. Você pode pular esta etapa porque este comentário vai executar este comando automaticamente depois disso, que é como correr metro, como falamos anteriormente. Então agora vamos executar o comando que temos rodado Android quando você quer executar iOS, que apenas substituí-lo com iOS. Então vamos executar agora o aplicativo. Novamente. Ele vai construí-lo e levará algum tempo até que ele execute o aplicativo neste dispositivo. Você não tem que fazer nada. Você só precisa esperar. E quando terminar, ele abrirá um novo terminal para metro e também USE o aplicativo é criado aqui. Então eu vou colocar dois simuladores. Um é o iPhone que fizemos anteriormente, e aqui o com Android. E eu vou pular este vídeo para fazer rápido para carregar e executar o aplicativo. Então, como você vê aqui, o prédio está acabado e está construindo o aplicativo no telefone lentamente. E ele vai executar o aplicativo, instalá-lo no telefone, e veremos exatamente como fizemos com o iOS. Então, como podem ver aqui, Metro ainda está funcionando e se conectando com os dispositivos de placas. Então agora ele está convertendo o código JavaScript para código Android e iOS. E isso nos mostra essa implementação aqui. Então vamos mudar algo em seu deus, eu vou apenas fazer isso menor aqui. E depois podemos fechar isto. E eu vou colocar, por exemplo, um curso React Native. E eu vou clicar em Salvar. Veremos que as mudanças são aplicadas em ambos os formulários. Então, sem qualquer problema e sem nenhum problema. E como você vê aqui, nós temos todas as atualizações imediatamente, que está vindo como recarga quente. Então, para ver o nosso aplicativo em execução e podemos fazer nossas alterações imediatamente. Então, esta é uma maneira de executar o dispositivo Android. Se você tiver algum problema, você pode sempre fazer a solução de problemas, que está localizado aqui na página de solução de problemas. Então, aqui eles estavam coletando alguns problemas comuns e eles estão corrigindo-os através desta solução de problemas, que você sempre precisa se você tiver alguns problemas. Então é isso. Você só precisa se você tiver problema, basta ir para solução de problemas ou perguntar-me no Q e um, ou você também pode perguntar em seu repositório GitHub para problemas. E você pode abrir um novo problema e eles responderão sobre como corrigi-lo. Mas espero que se você seguir meus passos, o que eu expliquei para você, você não terá problemas ao executar seu aplicativo. 14. Como executar no seu dispositivo móvel usando Vysor: Algumas funcionalidades que estamos usando em nosso dispositivo Android ou emulador não estarão disponíveis, como a forma como temos um dispositivo ray. Então, também, algumas pessoas estão sofrendo que o Android Studio é muito pesado para seu computador e eles têm quantidade limitada de RAM. Então você sabe que o Android Studio precisa de muita RAM e muitos recursos até agora que você também pode desenvolver em seu próprio telefone celular. Então, pode ser iPhone ou Android. Vou mostrar-lhe como vou conectar o meu dispositivo Android e vou desenvolver nele. Mas primeiro passo temos que fazer isso para ter certeza de que o emulador está desligado. Então, devemos desligar o emulador, que está sendo executado no Android Studio. Então você não pode clicar neste botão, que é chamado de energia. E então ele desligaria para você esse dispositivo totalmente. Então, depois de Dunning do dispositivo, você também precisa fechá-lo a partir daqui. Então você precisa fechar o dispositivo totalmente da sua máquina e também do seu emulador. Você deve ter certeza de que no Android Studio você tem qualquer coisa em execução em seus dispositivos virtuais. Depois disso, vamos mover e instalar algum programa ou aplicativo que é chamado Visor. E este visor, você pode ir para o site visor dot io, e você pode baixá-lo para todos os seus sistemas operacionais, Windows, Mac, Linux, e também você pode instalá-lo no navegador usando alguma extensão. Certo, como podemos usar essa viseira? Eu já baixei este aplicativo e, como você vê aqui, estou rodando no meu dispositivo. Então, temos aqui duas opções, dispositivos Android e dispositivos iOS. Vou mostrar como podemos desenvolver no dispositivo Android. Então eu vou mostrar a vocês eu mesmo e então eu estou mostrando como eu estou conectando meu dispositivo e habilitando esse modo de depuração, modo depuração USB, como é mencionado aqui. Olá e bem-vindo. Eu sou família e vou mostrar-lhe como conectar seu dispositivo Android. Para calcular isso, em primeiro lugar, você precisa usar o cabo original, cabo USB, que vem com o telefone originalmente. Então, caso contrário, você terá alguns problemas com a conexão ao seu PC. Primeiro, vou conectá-lo, usá-lo , este USB. E então você terá no telefone várias opções quando você deslizar para baixo ou quando você tem uma lista suspensa, que suspensa, está dizendo como carregar via USB como você vê aqui. Mas agora o que eu estou indo, eu vou clicar neste carregamento via USB. Você terá várias opções. Então isso é diferente de celular para celular. Assim, alguns dispositivos eles estão tendo apenas transferir fotos, transferir arquivos, carregar apenas, e cobrar reverter, e importar midi. Assim, alguns dispositivos funcionam diretamente com seu computador quando você diz transferir arquivos. Mas alguns deles, você precisa ter algo chamado Import MIDI. Como meu dispositivo dizendo aqui, eu tenho telefone Huawei e é, Eu tenho essa opção aqui. Então eu vou selecionar essa opção no final. Então, como você vê aqui, e então o comportamento do dispositivo será alterado. Então até agora, como você vê aquele visor, eles não detectaram nada porque precisamos ativar o modo de depuração ou o modo de desenvolvedor, como podemos fazer isso? Em primeiro lugar, você precisa ir para as configurações no seu telefone. Então, vou para Configurações e Configurações. No final, você verá algo sobre o telefone. Você clica nele. E então você terá algo chamado número de compilação. E como você vê aqui no número da compilação, eu vou clicar várias vezes nele. Como eu vou colocar o meu dedo e fazê-lo como de uma forma que eu vou ter opções. Como se ele me dissesse que você está se comportando como desenvolvedor. Ok, agora está tudo bem. Meu dispositivo instinto como desenvolvedor, mas precisamos ativar a depuração USB Android. Então, como você vê aqui, nós também podemos pesquisar no cenário. Então, quando eu vou para a minha configuração no meu dispositivo, como você vê aqui, nós temos um aumento no topo. Para que possamos procurar no cenário. E nesta pesquisa você pode digitar depuração Android ou USB. E será encontrado diretamente na segunda opção de suas opções nas configurações. Nós clicamos nele. E, em seguida, ele irá levá-lo para algo chamado opções de desenvolvedor. E nessas opções de desenvolvedor, você precisa ativar o modo de depuração. Basta rolar para baixo e você verá a depuração USB como você vê aqui. Então, na depuração USB, você só precisa permitir isso. Então, vou permitir isso. E clique, Ok. E você terá como alguns, alguma notificação dizendo que o conselheiro está tentando se conectar ao seu dispositivo, então você tem que permitir isso. Então você tem que pressionar neste caso. Está bem. Então eu estou mais OK. E agora tudo se foi e está bem. E como você vê na viseira que meu dispositivo foi detectado. Então, quando vamos para o meu dispositivo no laptop ou computador, quando eu clicar no play, eu vou ver que meu dispositivo está sendo executado no emulador aqui. Então eu vou ter algo exatamente como o emulador que tínhamos anteriormente com o Android Studio. E mostrará um anel de metal do meu aparelho aqui. Então, como você vê, eu tenho todas as informações ou mostrando meu telefone totalmente viver com este aplicativo. Então, com isso, você pode implantar o aplicativo no seu dispositivo, no seu celular. E então ele será executado em seu dispositivo móvel no NIH, acho que seria instalado em seu aplicativo. Seria salvo aqui. Assim, você não precisa se preocupar em instalar o aplicativo novamente ou implantá-lo e depois colocá-lo em seu dispositivo. Ele já será implantado no dispositivo. Então, se você não viu essas opções, sobre as quais eu falei antes, está aqui. Então, quando eu clico, como você vê, eu fiz fotos de esfera, transferir arquivos. Alguns íons móveis têm midi de entrada. Então algo que é como equipamento de música, não funciona de outra forma, mas alguns dispositivos funcionam com arquivos de transferência. Então, dessa forma, você precisa apenas alternar até que você esteja aplicativo mais sábio detectar essa mudança. E nesse caso, você pode selecionar o que deseja. Então, vamos continuar e implantar nosso aplicativo para o telefone celular. Vejo-te com isso. Ok, agora como você vê aqui, meu telefone já está conectado a esta viseira e vamos implantar o aplicativo para este dispositivo. Como eu disse, você deve se certificar de que o emulador Android, que instalamos com o Android Studio, ele deve ser desligado. Então, para ter certeza também, precisamos fazer os mesmos passos que fizemos anteriormente. Então primeiro, precisamos primeiro executar os dispositivos ADB, como você se lembra aqui. Então, quando eu executar dispositivos ADB, meu dispositivo seria detectado automaticamente. Este é o código do meu dispositivo, e então estaria aqui. Por isso, certifique-se de que tem apenas um dispositivo na lista. Caso contrário, o aplicativo React não funcionará corretamente. Então, vamos executar novamente o aplicativo usando o Android. Vou colocar o comando de novo. Então, como você vê, ele está instalando o aplicativo. Ele vai instalar o aplicativo para o meu telefone, para o formulário físico que está conectado. Por isso, vai levar também um pouco de tempo de construção. Mas como você vê aqui, está ficando mais rápido que o emulador. Porque aqui o aplicativo foi instalado e implantado diretamente no dispositivo, e está usando os recursos do dispositivo. Não precisamos usar recursos do PC para depurar seu código e implantá-lo lá. Então, toda vez que eu faço algo com o meu aplicativo, eu vou mudar aqui novamente, núcleos e salvar. Vamos ver o diretamente, a mudança será detectada aqui. E também o simulador do iPhone está funcionando e ainda funciona bem. Então, como você vê aqui, você tem uma liberdade. Você pode usar emulador ou emulador iOS ou simulador. E você também pode usar seu dispositivo. E, como você vê, você também pode ficar off-line. Você pode desativar o, totalmente o desenvolvimento ou para o aplicativo. E você verá que o aplicativo está implantado no seu dispositivo. Então eu vou te mostrar rapidamente. E como você vê, o aplicativo está aqui, projetos de núcleos. Então, quando eu clicar neste aplicativo, eu vou vê-lo diretamente aberto e também um eu desconectar o telefone. Vamos ver ainda o aplicativo e em execução sem problemas. É como se estivesse instalado no meu telefone. Então, este é um ótimo recurso porque ele está usando o Android nativo. É por isso que eu prefiro usar o React Native CLI do que x bar, x bar também. Ok, Você pode executar o aplicativo, mas sobre algum bridging que é chamado aplicativo barra x, você deve tê-lo instalado no seu telefone e também no seu PC. Mas aqui, o aplicativo está sendo armazenado diretamente e você pode usá-lo em seu dispositivo. 15. Olá, App do mundo e registro: A maneira mais fácil de depurar o aplicativo ou aplicativo móvel é fazer e registrar. Registro em log. Quero dizer que eu faço um log de console, como eu mostrei antes, que temos console.log e então temos um dado. Então o registro do console, ele vai me procurar no terminal, mas qual terminal? O terminal que está funcionando sob o Metro. Metro Bundler, vai me mostrar todos os registros do console que estou fazendo. E é como o nosso console. Então, desta forma, se você console registrar algo e salvar o aplicativo, ele vai registrar os dados lá. Mas vamos tornar este código mais simples. Você sabe que isso é um pouco complicado. Por isso, temos de tornar isto mais simples para podermos ir passo a passo. Se você entrar no próprio aplicativo, você verá algo chamado o básico. É como aplicação Helloworld. Então, vamos clicar neste link e ele nos levará a algo como introdução. E teremos aqui algum exemplo que será aplicação completa para Hello World. Então vamos copiar todo esse código. Eu vou explicar isso mais tarde. Então, vamos novamente para a nossa aplicação em app.js. Como eu disse, o ponto de entrada da nossa aplicação, nós excluímos tudo. E então nós faria este código, vamos abrir contra o simulador e, em seguida, pressionamos Salvar. Então vamos salvar nosso código. Como você vê, ele é formatado automaticamente. E como você vê aqui, eu tenho aqui meu aplicativo é depurado e carregado. Então, se eu mudar isso, Eu vou dizer, por exemplo, aqui, Olá mundo. Então, só para ter certeza de que tudo está funcionando bem. Ok, legal. Temos aqui Hello World. Se formos para as partes do aplicativo, você verá que é muito simples. Então, primeiro temos que importar Reagir da biblioteca Reagir, e também precisamos importar alguns componentes. E esses componentes são usados sempre. O aplicativo, como você sabe, Reagir nativo não é HTML ou CSS. Não. É algo como podemos dizer componentes, estamos usando componentes e, em seguida, chamamos esses componentes e colocar alguns dados dentro deles para exibi-los em nossa aplicação, vamos em nosso curso para os componentes que precisaremos construir nossa aplicação. Então, para isso, vou explicar os componentes que precisamos para o curso em si. Então, por exemplo, temos aqui para esta visão. Esta visão é algo como você pode dizer em HTML, é um div e div que irá conter, por exemplo, algo mais componente dentro, ou por exemplo, textos ou botões ou caixas de texto. Então aqui, como você vê que esta visão está implementando como uma div dentro da minha aplicação. Além disso, posso ter uma visão dentro de você. Então podemos usar como div dentro div exatamente da mesma maneira. Texto. Se você quiser colocar um texto, você pode usá-lo também. Como você pode colocar qualquer texto é como um span ou podemos dizer parágrafo. E então você pode colocar o texto dentro dessa tag aqui. Então, agora, depois disso, podemos dizer que nosso aplicativo componente é chamado seu aplicativo. Podemos dizer que este, o seu aplicativo, está carregado aqui. Então, quando eu criar meu próprio componente e colocá-lo aqui, em seguida, o componente será chamado dentro do meu ponto de entrada da minha aplicação. Então vamos renomear tudo isso. Podemos dizer que isto é AB e isto é AP. Ele mostra que esta é uma função e esta função retornar para mim que reagir modelo nativo. E esta função será exportada e chamada no index.js como você vê aqui. E ele será carregado e registrar o componente principal como AB e AB registro fará para mim a execução do aplicativo. Este histórico resumido, se vamos até ele, é se comunicar com o Android e também com bibliotecas do iOS para executar o aplicativo e mudá-lo para um aplicativo nativo. Nós não vamos entrar em detalhes sobre isso. Vamos fazer coisas práticas. Não gosto de fazer muitas Teorias. Eu também gosto de fazer sempre algo prático. É por isso que todos os meus cursos são impraticáveis. Porque, na verdade, gosto de aprender com coisas práticas. Preciso ver algo na minha frente. Então vamos fazer um registro de console. Como eu disse, vamos fazer um registro de console. Assim, o registro pode ser como podemos dizer que o ponto de entrada da minha aplicação estará dentro desta função. Então, esta função retornará para mim este modelo. Mas antes disso, você pode escrever qualquer código JavaScript, como eu disse. Então código JavaScript podemos dizer console.log e podemos dizer Olá mundo. Então podemos registrar nossas coisas no console. E onde eu vou ver isso aparecerá, ele aparecerá no meu terminal, que é chamado Metro, como eu mostrei, que ele será executado imediatamente após o empacotamento do aplicativo. Então vamos ampliar isso. Quero torná-lo maior. E como você vê aqui, temos Hello World. Legal. Então, agora, se eu ir novamente para a minha aplicação e mudar isso, como eu digo aqui, Olá Mundo. Então vamos ver que o login ainda é log aqui, e isso é informação que é chamado log. Ok, ótimo, então vamos definir, por exemplo, constante, alinhá-lo constante e eu digo x. E este x terá, por exemplo, valor, meu curso. E então eu vou colocar isso, e agora eu vou consolar este x para que possamos remover este, salvar tudo. A formatação automática está funcionando bem. E quando eu for para o terminal, novamente, vou ver o meu curso. Legal. Então isso é JavaScript. Na verdade, estamos escrevendo aqui JavaScript, que vamos usar dentro de nossos componentes para esta parte, que é chamado styling. É como estilo, mas SS nazista, é estilo React Native. E veremos mais tarde como vamos estilizar nossa aplicação. Vou falar sobre todas as coisas que precisamos de estilo para os nossos componentes. Então, dessa forma, você pode registrar e depurar seu aplicativo usando o console do seu aplicativo. 16. Como depurar o Chrome: Ok, nesta palestra, eu vou mostrar a vocês como depurar nosso aplicativo. Claro, a depuração é um recurso muito grande, então podemos usá-lo para rastrear nossos problemas, como eu disse, ok, Podemos usar o log do console, mas é melhor para usar a depuração. Existem duas maneiras de depuração no React Native. O primeiro deles está usando o Google Chrome. Sim, usando o navegador. Claro que você também pode usar um navegador para depurar seu aplicativo. Como podemos fazer isso. Primeiro, você precisa clicar no seu simulador e, em seguida, há um atalho. Você tem que fazê-lo, que é Control D no Windows ou Command D no Mac. Então, quando você clicar em Control D, você terá um menu como este. Então você terá várias opções. Um deles depurar com o Chrome. Então, quando você clica no bug com o Chrome, ele será aberto para você no depurador. Então eu depurando página. Então, como você vê aqui, podemos ver que temos alguma página de depuração. E esta página contém algumas informações. Então você pode começar a depurar. Ok, então eu vou criar o depurador. Como posso ver, como posso colocar um ponto de interrupção no meu Chrome. Então primeiro temos que abrir o DevTools. Então, como abrir o DevTools? Basta pressionar F2 pressionando F2. Como podem ver, eu tenho aqui o inspetor, o DevTools do Chrome. Ok, agora eu preciso colocar, por exemplo, um ponto de interrupção, mas onde, como eu posso chegar ao arquivo, que é, por exemplo, para mim, o arquivo ab.js. Então, primeiro, se você se lembra, temos um registro de console aqui. Então eu tenho certeza que se você abrir este e abrir o console também, você verá a mensagem que nós imprimimos. Ele estará localizado no console aqui. Então eu coloquei assim. Então, quando eu pressionar reload, verei que meu aplicativo foi recarregado. Então agora podemos ver esta mensagem. Então, quando eu clicar neste app.js seis, ele vai me mostrar no código onde eu coloquei este comentário, onde eu coloquei este log de console, e ele vai abrir para mim o código exatamente como eu tê-lo no código Visual Studio. Então, dessa forma, você pode criar um ponto de interrupção. Você sabe, no Chrome você pode criar um ponto de interrupção clicando no número da linha. Então, quando eu clico aqui, eu criei um ponto de interrupção. Certo, vamos recarregar agora o aplicativo. E como vemos que paramos no ponto de interrupção automaticamente. Então agora eu posso ver e verificar o valor de x, por exemplo, apenas colocando o mouse sobre ele. E eu posso ver o que está acontecendo aqui. Então, quando eu quero dar mais um passo, eu clico nesta seta. Então podemos dar mais um passo. E então eu vou ver que x tem valor, meu curso. Então, dessa forma, estamos fazendo depuração via Chrome. E, claro, depois de terminar a depuração, você pressiona play e o aplicativo continua carregando. Então você não pode tratar o arquivo app.js exatamente das fontes aqui, como você sabe sempre. Mas você precisa colocar um log de console ou você pode habilitar este e habilitar os arcos finais em exceções de revestimento. Então, quando há uma exceção, ele irá mostrar-lhe em seu código de aplicativo onde a exceção é colocada. 17. Descuide com VSCODE: Outra maneira de depurar nosso aplicativo é usando o depurador do Visual Studio Code. O Visual Studio também fornece uma ferramenta de depurador que podemos usar como fizemos com o Chrome. Mas antes de tudo, e informações muito importantes que você precisa fazer antes de configurar o depurador no código do Visual Studio, você deve desativar o Metro. Metro como ele é aberto em nosso terminal automaticamente quando executamos iOS, Reagir aplicativo nativo. Então, nesse caso, precisamos fechar a Metro. O mesmo pode acontecer com o Android. Então vamos fechar isso. Então eu vou parar isso aqui. Como pressionando o Controle C ou o Comando C. E então eu vou fechá-lo totalmente. E como você vê aqui, que nós não temos qualquer depuração mais e nosso aplicativo não pode ser carregado e nós temos agora forma normal. Então, nesse caso, vamos agora configurar um depurador usando Visual Studio Code. Então, como podemos fazer isso? Primeiro, você precisa ir para este botão. Podemos dizer executar e depurar. E então você vai encontrar aqui algo como criar Aidan JSON arquivo e arquivo JSON lavandaria é o arquivo onde vamos colocar a configuração para o nosso depurador. Então, quando você clica neste link, então você terá algumas opções. Um deles deve ser o nativo do AC. Mas como você vê aqui, eu não tenho essa opção porque eu devo instalar a extensão de ferramenta React Native, que eu já disse antes. Estas são as ferramentas nativas do React. Então, em um caso em que não funciona, às vezes é pedido geu para recarregar. Então você pode simplesmente recarregar o aplicativo novamente ou clicar em recarregar. Ou, por exemplo, você pode simplesmente desabilitar e habilitá-lo novamente, e você terá essa opção. Então, por exemplo, eu tenho aqui novamente apenas para ter certeza de que está funcionando, ok, está bem. Agora vou clicar na ferramenta de depuração e eu vou criar, criar arquivo JSON longo. Agora eu tenho opção Reagir nativo. Então, se você não tem esta opção apenas para iniciar a extensão e você vai tê-lo novamente, ok, você clicar em Reagir nativo, então você iria obter outras opções. Um deles está anexado para empacotá-lo. Há várias maneiras de depuração, mas por exemplo, anexar ao empacotador é o mais fácil. Então podemos desmarcar este e adicionar isso ao empacotador. Agora estou clicando em OK. E ele irá gerar para mim um arquivo, arquivo JSON, onde ele tem alguma configuração chamada attach to packager. E esta tentativa de orçamento e empacotador tem alguns comentários onde ele vai trabalhar com o meu depurador. Ok, agora precisamos executar nosso aplicativo. Nós não vamos executar nosso aplicativo de uma maneira como fizemos antes. Como, Eu não vou para a linha de comando e eu vou dizer em px Reagir nativo ou um iOS ou não. Nós vamos deixar o anexar ao empacotador para executar o aplicativo para mim. Então, se eu ir aqui para a depuração, Claro, como se você estiver na lista de arquivos, você vai novamente para o depurador. Você terá botão aqui e este botão, ele é chamado executar e depurar. E você terá várias opções. Um deles está nisso para empacotador. É baseado na configuração que temos aqui no empréstimo JSON. E se você está curioso para saber onde está este tempo Jason foi criado. Como você vê, ele será em ponto v é pasta de código. Como eu disse antes, que dentro desta pasta estamos colocando alguma configuração que compartilhamos com a equipe, como eu configurações como lançamento, como por exemplo, algumas recomendações para extensões, etc Então agora podemos adicionar e executar nosso aplicativo. Então, vamos clicar em executar. E como você vê, ele vai executar o aplicativo exatamente como Metro está fazendo. Se você se lembra que temos o mesmo sinal aqui e agora o embalador começou. Ok, legal. Mas agora meu aplicativo que não foi iniciado automaticamente, então você precisa fazer isso e executá-lo automaticamente ou manualmente, desculpe. Então, basta clicar nele. E você tem, é claro, como eu disse, o aplicativo será instalado em sua máquina ou em seu dispositivo e você acabou de executá-lo. E como você vê, como o atacante já sabe que há algum telefone está executando o aplicativo. Então agora podemos começar a depurá-lo. Ok, vamos tentar colocar um ponto de ruptura. Vou colocar aqui um ponto de interrupção em nossa constante que criamos antes. Por exemplo, este e, em seguida, salve. Então, como você vê que a depuração começar a funcionar. Então eu estou indo agora passo a passo. E aqui eu tenho o valor de x, exatamente como tínhamos com o Chrome. Está bem? Às vezes, o ponto de interrupção não funciona para você porque precisamos ativar a depuração com o Chrome. Então eu não sei, eles estão chamando isso ativa o trabalho com crescido, mas deve ser como apenas ativar depuração. Então, como podemos ativar a depuração, se você se lembra, pressionamos o atalho, que é Control D ou Command D no Mac. E às vezes você precisa pressionar várias vezes Control D porque ele não aparece. Rápido, então você tem que fazer isso várias vezes até ele chegar aqui. Então, agora, depois disso, você vê aqui começar a depurar com o Chrome e, em seguida, você clica nele. Se você não clicar nisso, por exemplo, eu vou parar a depuração. E então tudo bem, eu preciso continuar minha inscrição. Ok, vamos continuar. Você vê que não há nenhuma resposta mais porque ele não está anexado à depuração porque agora eu não posso depurar meu aplicativo. Este ponto de interrupção não pode ver o que está acontecendo no aplicativo. Portanto, é muito importante ativar o bug com o Chrome. Está escrito com o Chrome, mas é com qualquer coisa que é como anexado ao empacotador. Então, podemos apenas aqui, anexado depurador ou depurar com o Chrome. Agora posso colocar meu ponto de interrupção, recarregar o aplicativo, parei no ponto de interrupção. Então você deve ter certeza de que duas coisas. Primeiro, feche o metrô, aquele terminal, que fechamos no início. Em segundo lugar, você deve habilitar a depuração aqui no DevTools do aplicativo estamos tê-lo aqui. Outra informação importante se você quiser parar de depurar, porque você sabe que a depuração está tornando o aplicativo muito lento. Então você precisa parar a depuração. Você tem que parar a depuração fazendo muitas coisas. Primeiro, você precisa clicar neste depurador de parada e também parou de depurar no DevTools como você vê aqui. E também, você precisa encontrar um comentário pressionando F1 e F1, você precisa procurar por React Native. Pare o empacotador. É muito importante fazer isso porque caso contrário, o empacotador ainda está em execução em segundo plano. E quando você executar o pacote ou novamente, ou você executar novo aplicativo, ele irá dizer-lhe que o empacotador já está em execução e você não vai saber porque você parou tudo e você parou a partir daqui e é ainda correndo e você não sabe de onde pará-lo. Então, a melhor maneira de fazer isso é fazendo e pressionando F1 e encontrando stop packager do comando nativo React. E então ele vai parar o pacote ou totalmente. E você poderá executar, por exemplo, o aplicativo novamente tão normal quanto vimos no terminal. Ou você pode executá-lo novamente com anexado ao pacote ou mencionando o erro que eu lhe disse, talvez você vai obter este problema como você vê aqui, que você iria obter a soma. Outro depurador já está conectado ao empacotador. Feche-o antes de tentar depurar com código VS. Portanto, isto é muito importante. Então você também precisa parar o empacotador, como eu lhe disse. Aqui, pare esse empacotador, empacote ou pare. E você também precisa verificar o terminal. Está tudo bem, você não tem nada funcionando. E também que, em seguida, minnow, que temos usado aqui. Então você precisa saber isso ou brilhante totalmente. Então eu tenho isso aqui. Desistir. Está bem. Você tem agora no seu telefone desconectado do Metro e, em seguida, você executar anexar ao empacotador e o aplicativo será executado novamente. Então, como você vê, eu tenho ele rodando novamente, mas eu não tenho nenhum aplicativo. Então você só precisa abrir o DevTools novamente. E, por exemplo, talvez você possa dizer recarregar o aplicativo apenas para conectá-lo novamente. E também depurar com o Chrome para ativar a depuração com pontos de interrupção. Então, todas essas soluções de problemas, você tem que tomar cuidado. Assista a este vídeo várias vezes. Se você tiver problemas, então você saberá como depurar com VS Code. 18. Como obter dados de dados de de um filme: Ok, agora estamos começando a segunda seção depois de ter preparado nossa vitamina e adicionar instalado o que é necessário de nós. Primeiro de tudo, precisamos de uma API, precisamos de dados, precisamos de imagens dos filmes. Precisamos de alguma forma fazer um vídeo do filme. Então, para isso, precisamos de algo chamado API. E a API nos fornecerá uma lista de dados como dados JSON, que podemos usar em nosso aplicativo e mostrar como ele é visto aqui no site. Há um site que é chamado o filme db.org ou o filme database.org, que está oferecendo esta API. Então, como você vê aqui, nós temos lista de filmes está apenas indo. Alguns comentários sobre filmes é apenas mostrando como algumas imagens que são os atores e alguém vê, etc. Então eu vou usar a API deste site. E novamente, vamos exibir essa informação, mas no aplicativo móvel. Mas, claro, se você quiser construir sua própria estrutura, você precisa construir uma API. E, criando uma API, você pode usar várias tecnologias de backend, como, por exemplo, NodeJS, todos C-sharp. Até você pode usar um Firebase. Mas para torná-lo rápido, porque somos especializados aqui na frente e, e desenvolvimento móvel. Não somos desenvolvedores de back-end. Vamos usar esta API que já está implementada. E se você quiser saber como construir uma API que é como baseado em volta e baseado em Node.JS. Você pode seguir para a minha página onde é bits azuis embora Dev, Eu tenho um curso completo sobre a construção de uma API web de comércio eletrônico completa. Essa API você vai, ou nesse projeto, você aprenderá a criar a API sozinho. No nosso caso, será como a API de um filme. Você é, você pode armazená-los filmes, por exemplo. Torná-los sempre uma filtragem de todas essas informações. Então este é um projeto prático real com comércio eletrônico, mas também, você pode saber como fazer upload de imagens, como criar as APIs e como você pode protegê-las. Para o nosso curso, vamos usar a API que é fornecida neste site, que é gratuito e disponível para todos. Primeiro de tudo, precisamos clicar em Join, CMDB. Temos que se registrar lá e criar uma conta para ter acesso à sua API. Então eu vou preencher este formulário rapidamente. E como você vê aqui, eu preenchi meus dados e eu vou me inscrever. E depois disso você receberá um e-mail e encaminhará esse e-mail que você precisa. Verifique sua conta, então você deve ir para o e-mail. Você vai chegar lá um link, e então você clica no link e, em seguida, sua conta será verificada. Então eu vou agora para o meu e-mail. Recebi informações de que meu e-mail foi verificado. Então eu vou agora fazer login. Então aqui já temos a tela. Vou colocar minha senha de novo e depois olhar para dentro. Então vamos olhar depois que meu aplicativo ou nossa conta foi criado. Então agora eu tenho a conta é criada. Nós também podemos usar a API para isso. Então, como podemos começar a usar API, é muito fácil. Você sabe que EPI, é algo como uma ligação. E este link, você pode obtê-lo e você pode obter dados dele, como podemos usar esse link ou como podemos encontrá-lo. Primeiro de tudo, você precisa acessar suas configurações de perfil. Então você terá que clicar aqui e, em seguida, clicar em Configurações. E depois dessas configurações, você vê que eu tenho todas as minhas informações. Tenho algo chamado API. E para a API, precisamos solicitar uma chave de API. Ok, vamos primeiro embora, documentação desta API. Ele disse que nossa documentação principal está localizada neste link. Então você vai para este link e como você vê aqui, nós obtemos todas as informações e todas as etapas, como podemos usar esta API. Então, agora vou mostrar-vos esses passos rapidamente. Então, primeiro de tudo, precisamos ir para a nossa conta lá e depois API. E então eu quero gerar ou solicitar uma chave de API porque cada API precisa de uma chave. Pagar você pode escolher a opção desenvolver porque somos desenvolvedores e vamos usar esta API. E dizemos que o nosso projeto sem fins lucrativos. Por isso, temos de aprovar algum acordo para podermos ler toda esta informação e, em seguida, podemos aceitar isso. E depois disso, que tipo de uso. Então você precisa saber qual é o tipo de uso para o seu aplicativo. Por exemplo, estou dizendo um aplicativo móvel, ou por exemplo, um aplicativo de desktop ou um site. Cabe a você. Por enquanto vou usar um aplicativo móvel, por exemplo. Nome do aplicativo. Podemos dizer app Filmes por apenas um nome, o que é simples. E então você clica em enviar. E depois disso você tem uma notificação de que você precisa preencher todo o formulário. Então eu vou preenchê-lo rapidamente na sua frente e eu iria clicar em Enviar. Então eu sinto para baixo todas as informações necessárias. Acabei de colocar na sua frente algumas informações aleatórias para privacidade. Então eu vou colocar submissão. Então, se ele diz aqui, estado do endereço não pode estar em branco. Então eu posso colocar aqui estado um, e então podemos clicar em Enviar. Nossas mudanças foram feitas, e então eu recebo uma chave de API. Esta chave API, você pode usá-lo para obter dados do banco de dados deste site. Então, por exemplo, há um exemplo aqui, solicitações de API. Então podemos pegar este URL, este link, e então podemos ir para o Postman ou qualquer outra ferramenta onde você está rastreando ou vendo dados. Por exemplo, você pode usar esse URL também no navegador. Então, por exemplo, eu vou aqui e então eu vou colocar o link no navegador. E como podem ver, tenho vários dados e informações sobre algum filme. Então, por exemplo, eu recebo quedas adultas, toda essa informação para isso. Como você vê aqui, que esta API é feia. Então eu estou usando uma ferramenta que se chama Carteiro. Então este dinheiro pós-dinheiro, você pode baixá-lo de seu site original. Então eu vou aqui. E como você vê, temos no Google o primeiro link. E no primeiro link você pode instalar e baixar um carteiro. Ou se você não encontrar o link facilmente, você pode ir diretamente aqui no Google para baixar Postman, e então você terá que baixar o aplicativo diretamente com base em seu sistema operacional. Então, depois de baixar o carteiro, como você vê aqui, eu tenho essa visão ou a tela. Então este é o carteiro que vamos usar ou para testar nossa API. Então eu vou abrir uma nova guia. E esta guia vai me mostrar vários métodos para GET, post, PUT, etc. Todos estes são informações que eu vou explicar para obter os dados. Estamos pedido GET, estamos fazendo uma solicitação get. Então, basta colar o URL aqui. Como você vê, a API é um link que é fornecido e sempre sufixo com chave API. E esta chave API, o que temos para a nossa conta. Então, para isso, depois de colar este exemplo API, podemos então clicar em Enviar. E quando eu enviar um pedido, então eu vou obter todos os dados sobre, por exemplo, algum filme. E este filme chama-se Clube da Luta. E há uma descrição sobre a popularidade do filme e todas essas informações e comentários em países, tempo de execução, linguagem falada, todos os dados que eu preciso. E são exatamente os mesmos dados que você vê em seu site principal. Então, por exemplo, eu vou aqui e vou ver o Clube da Luta, que é como um filme. Ou podemos clicar em qualquer filme, por exemplo, os Simpsons. E então você vê descrição geral, e você vê quem é o ator. Tudo isso vem com a API, que eu mostrei agora no Carteiro. Então, para isso, você também precisa usar essa API em seu aplicativo para exibir, por exemplo, como você vê também uma imagem para que o usuário possa clicar sobre ela e ver alguns detalhes. Ok, vamos dar uma olhada na documentação desta API. Como você vê, há muita informação que você precisa. Então, por exemplo, há filmes e filmes internos, há muitas informações como obter imagens, obter créditos, boas mudanças. Raid filme, por exemplo, obter filmes mais recentes, começar agora a reproduzir filmes que são, por exemplo, eu quero obter filmes populares e filmes populares. Como você vê você ir e experimentá-lo. Você verá o mesmo link aqui. Então, para testar esta API, você só precisa copiar todo esse URL, ir para o Postman e depois colocá-lo aqui. E então você precisa substituir essa chave API entre todas essas setas com sua chave. Então, vou para a minha conta de novo. E então eu vou e copiar a chave API. E então eu vou substituir por esta chave API como você vê aqui. Então agora eu tenho todas as informações. Ele tem algumas outras informações, como idioma e páginas, porque será várias páginas, como página 1, página 2, etc Então vamos clicar em enviar e aguardar a resposta. - Legal. Temos uma resposta. Temos várias páginas ou vários resultados semelhantes. Um ou primeiro deles é primeiro filme e segundo filme, terceiro filme, como você vê aqui. E cada filme tem algum nome ou título e tem alguma imagem e visão geral. Até agora que você sempre precisa seguir a documentação para obter o que queremos. E durante o curso, vou usar esta documentação para cumprir o que precisamos para a nossa aplicação. Então, o que é necessário de você agora, basta se registrar neste site, criar uma chave API, e então vamos passar para essa documentação. E veremos na próxima palestra durante a construção da nossa aplicação. 19. Criação de aplicativos de filmes: Ok, agora vamos criar um novo projeto. O projeto que vimos anteriormente que criamos um projeto Hello World ou algo como projeto de curso, que vimos na introdução. Mas agora vamos criar um novo projeto para o nosso aplicativo de filmes. Então, para fazer isso, fazemos o mesmo passo. Abrimos o terminal clicando em Control J. E, em seguida, vamos escrever o comando MP x React Native nele e, em seguida, o nome do seu projeto. Mas antes disso precisamos saber onde estamos. Então agora estou abrindo o terminal ay, você precisa criar uma pasta. Então eu prefiro criar a pasta na minha área de trabalho. Então, digamos, por exemplo, para saber que agora estou usando o sistema Mac. Claro que você, quando estiver no Windows, verá a pasta onde está abrindo o Visual Studio Code. Mas agora abri o Visual Studio Code. Eu não estou em nenhuma pasta porque se você clicar aqui, não há nada. Primeiro, podemos abrir o terminal e ver onde estamos? Então eu vou digitar LS, lista como para mim, as pastas onde eu estou em. Então eu tenho aqui todas essas pastas. Vou para o desktop. Então você pode dizer desktop e você pressionar Tab, ele vai fazer auto-completar. E então você pode dizer claro, como você pode limpar a tela. Agora você está no diretório Desktop. Então vamos criar agora um novo diretório. Podemos dar-lhe um nome, Por exemplo, projetos ou, por exemplo, aplicações em geral, como onde você está indo para fazer seus aplicativos. Então eu vou dar-lhe para o exame fazer terrível, que é criar um diretório. Ele vai criar para mim uma pasta na minha área de trabalho e eu vou dar-lhe um nome, aplicativos, não apenas que ele. Então agora eu vou dizer CD, como acesso, os aplicativos. Como eu estou agora em Aplicativos aqui, Eu posso colocar meu comando nativo React, como vimos anteriormente para criar um aplicativo. Então, como podemos fazê-lo e px Reagir nativo, e depois nele. E então eu dou um nome para o aplicativo. Por exemplo, eu vou dar filmes em, neste caso, Eu vou correr e ele vai baixar para mim os modelos e todos os arquivos necessários como vimos anteriormente na introdução. Então eu vou pular este vídeo e voltar para você quando todos os arquivos estiverem instalados. Ok, então agora meu aplicativo foi instalado e agora temos suas recomendações para as quais nos acostumamos. Então eu vou para ir ou navegar para o diretório. Eu diria cd, app de filmes. E então eu vou entrar no aplicativo de filmes. Vamos ter certeza de que estamos lá dentro. Nós escrevemos “S “, ok, estamos aqui dentro. Então agora vamos abrir o projeto no código do Visual Studio. Então eu vou aqui e então eu diria Open Folder. Eu vou para a minha pasta, para os aplicativos de área de trabalho e, em seguida, eu vou escolher filmes aplicativo e, em seguida, abrir o projeto. Então, como você vê aqui, temos todos os arquivos sobre os quais falamos antes. Então vamos abrir o terminal novamente, MP x, Reagir, Nativo e, em seguida, executar. Então aqui você pode escolher um sistema no qual você deseja trabalhar. Neste curso. Vou trabalhar no sistema iOS. E, claro, quando terminarmos o aplicativo, vou mostrá-lo para você no Android também. Então, vamos executar o aplicativo no iOS. Então meu simulador por onde começar. E então poderemos usá-lo e ver o aplicativo que criamos. Então, nosso aplicativo está sendo executado agora como você vê no sistema iOS. Então, o que precisamos fazer para substituir todo seu código padrão que tínhamos ou tínhamos criado aqui, e substituí-lo por algo como Olá mundo. Se você se lembra, nós criamos um aplicativo que é chamado Olá Mundo. E para obter o código de volta a partir deste aplicativo, você pode ir para a documentação do React Native, e então você diz introdução. E então, na introdução, há aplicação helloworld. Você pode usá-lo para inicialização nesse projeto. Então, primeiro de tudo, eu vou copiar este código. Há dois tipos de como Reagir estilo de código de estilo nativo. Então podemos usar um deles. Para mim, eu prefiro usar o componente de função porque é mais curto e mais fácil de ler, não como um componente de classe. Então você pode até você, você pode escolher um deles. Componente de função. Vamos pegar este e pegar todo esse código. Volte para o nosso Visual Studio. Vamos fazer a tela como normalmente eu desenvolvo de uma forma como eu colocar esta tela como este tamanho pequeno. E aqui o aplicativo. E também fazemos isso menor aqui. Para que possamos trabalhar com mais liberdade. Então, no app.js, Vamos remover tudo e colocar aqui o nosso código. E então nós salvamos em nosso aplicativo será erodido e reiniciado e você pode começar a codificar aqui. Então, se você se lembrar que nós configuramos tudo como mais bonito, toda a configuração que são necessários para codificação em React Native. Então, todos eles, eles configuraram por padrão, você pode adicionar sua configuração como quiser. Então aqui temos o aplicativo do aplicativo. Vamos remover tudo isso e renomeá-lo, por exemplo, para apenas aplicativo. Como se você não tivesse que ter Hello World app, não é bom. Então, podemos simplesmente renomear todos estes para adicionar em index.js. Você vai lá e você apenas se certificar de que você está importando aplicativo apenas e tudo vai funcionar bem. Então nós salvamos, temos app.js e agora estamos prontos para codificação. 20. Crie o serviço de dados de filmes populares: Ok, nós vimos antes como podemos pegar dados da API de filmes, que nós construímos anteriormente, ou que nós obtivemos do banco de dados de filmes. Então, como você vê aqui, eu estou usando o Carteiro e este carteiro, por exemplo, eu estou usando uma das APIs para pegar filmes populares. E filmes populares são devolvidos desta forma. Portanto, há um campo chamado página para se referir o número das páginas que temos e também seus resultados. Então, dentro disso é tudo, será uma variedade de filmes. Então o que vamos fazer agora que precisamos exibir, por exemplo, lista de nomes de filmes populares que estão vindo desta API. Então, para fazer isso, precisamos usar um serviço. E usando um serviço para pegar dados da API, precisamos de uma biblioteca chamada eixo. Então vamos para o terminal e precisamos instalar uma biblioteca que é chamado eixo. E este eixo, você pode instalá-lo por MPM ou NPM instalar e, em seguida, axioma. Então, após a instalação deste, certifique-se de que você está na pasta do seu aplicativo no mesmo nível de pacote Jason. E você ir e verificar pacote Jason, você vai ver que eixo é adicionado. Então, depois disso, podemos usar eixos facilmente. Então, como usar eixos? Vamos para o app.js. E aqui podemos dizer axiomas de importação do eixo. Portanto, é muito fácil porque já o instalamos. Então eu posso dizer eixo de importação do eixo. Então, antes de abrir o aplicativo, eu vou aqui e defino uma constante como em geral. E dei-lhe um nome, por exemplo, obter filmes populares. E esta será uma função definindo uma função será dessa forma. Então, podemos dizer que temos uma função de linha, como vimos com a função de aplicativo. Assim, o aplicativo é a função de seta e é aberto dessa forma. E você pode fazer o que dentro dela. É como função e depois obter filmes populares. E então eu abri os impostos. Então é exatamente da mesma maneira. Mas aqui estamos fazendo isso de maneira diferente porque estamos usando script de comércio eletrônico ou ES6. Então temos que nos acostumar com o estilo das funções. Então eu quero armazenar a lista retornada de filmes populares em algumas variáveis. Então eu tenho aqui constante. E eu dei essa constante como um nome. Dizemos resposta, que é a resposta que vem da API como esta. E então eu vou ter a resposta usando eixo. Então eu vou ter aqui eixo, que eu tenho importado aqui. Axiomas está se comportando como carteiro que podemos dizer em segundo plano. Porque eu dou um GET ou post ou ambos, ou excluir qualquer coisa da API. Então vamos usar o get. Então, quando você coloca um ponto, então você vai chegar aqui vários métodos. Um deles é pegar. Então, para obter os dados, como você vê, ele está me pedindo para fornecer com URL e esta string URL. Se você se lembra, nós temos isso anteriormente e vimos como nós construímos esse URL. Conseguimos a partir da API de filmes e passamos a chave API entre ela. Então agora eu vou usar este link e eu não preciso ter os outros parâmetros como linguagem EN nós a menos que se você quiser ter uma linguagem diferente dos filmes por agora, eu vou apenas usá-lo assim. Então eu vou pegar o URL API principal e, em seguida, filmes populares. Vimos como conseguimos isso antes. E, em seguida, a chave de API. Então eu vou copiar esta parte e depois voltar para o código. E aqui eu vou colocar a mesma string que eu tenho a partir de filmes API. Então, colocamos esta bebida. E então a melhor maneira de saber se estamos realmente recebendo resposta. Usamos o log do console, log do olhar e, em seguida, o RESP, e é isso. Então vamos ver qual eixo está voltando para mim. Mas primeiro, onde posso chamar esse míssil, precisamos chamar esse método quando o aplicativo estiver funcionando? Então, se você se lembra, nós estávamos consolando globo algo antes de retornar e ele estava sendo executado cada vez que eu recarregar ou atualizar o aplicativo. Então podemos usá-lo aqui. Então eu posso dizer recebe filmes populares, o mesmo método que eu criei aqui. Então vamos salvar tudo. E agora depois que eu salvar o IC que o aplicativo está carregado, mas precisamos ver o log do console para o console olhar está no terminal. Se você se lembrar, nosso terminal, nós criamos e é aberto automaticamente quando executamos o aplicativo. Então eu vou torná-lo maior para ver esses dados. E como você vê aqui que estamos ficando nulos porque estamos dizendo aqui, como se estivéssemos recebendo alguma API ou alguma resposta, mas está vazio. Está totalmente vazio. Nós não estamos recebendo nada como você é 0 algo e compreensível. Então precisamos de alguma forma obter os dados certos. Isto porque esse método, estes obter filmes populares é executado antes deste GetMethod, que é fornecido pelo eixo. Porque este método você deve fornecer como esperar até que isso aconteceu, e então podemos console a resposta. Então a resposta aqui não está recebendo nada do eixo porque ainda não está terminado. Precisamos de um tempo, temos de esperar. A API está bem, respondeu para mim e, em seguida, eu posso continuar para o seu log console. Então, como podemos resolver isso, precisamos usar JavaScript assíncrono. Podemos adicionar uma palavra-chave antes dos eixos ponto get. Podemos dizer como Aguarde, espere até que a resposta esteja pronta e, em seguida, continue com o código. Então, como podemos fazer isso, nós apenas dizemos aqui, aguarde palavra-chave. Esta palavra-chave await é reservada em JavaScript, mas requer algo que o método container, que é este, deve ser um dissipador. Devemos torná-lo assíncrono como podemos dizer como é o método sincronizado ice, é JavaScript isócrono. Precisamos de alguma forma esperar pela resposta aqui. Portanto, devemos, dessa forma, tornar este método como assíncrono. Então, vamos guardar isso. E então nosso aplicativo será recarregado. Vamos para o terminal. E você vê que nós temos todos os dados. Temos todos os dados no registro do console exatamente como temos no Postman. Então ele nos mostra que todos os dados estão chegando, que como nós queríamos com dados extras. E como você vê, é um pouco sujo. Precisamos alinhá-lo porque ele vem como JSON e precisamos alinhar esses dados JSON, como eles estão chegando no back-end. Então, para ver a resposta como temos no Postman, como você vê aqui no log do console, podemos fazer como algum truque que será em JavaScript. Então eu posso usar uma biblioteca JSON. Então é chamado JSON ou com letra maiúscula e, em seguida, stringify. E este método stringify, eu posso cercar sua resposta em torno dele, mas você precisa ter parâmetros extras que são nulos como este. E então o valor, algum valor que é um espaço que será 2. Então, dessa forma, ele dará um formato para o JSON exatamente como estamos vendo no Postman. Então eu sou cadeia de poeira definindo a resposta. E eu quero exibi-lo de alguma forma mais estilizado e formatado. Então, quando você salvar e ir para o terminal novamente, vamos ver a resposta está funcionando por isso. Então você pode ver a resposta JSON de forma mais agradável. Então, dessa forma, estamos prontos para agarrar a API. Mas o primeiro axioma é colocar dados extras sobre a API. Então, por exemplo, você coloca dados e, em seguida, ele colocou outra informação sobre a API, sobre os cabeçalhos que nós não precisamos e nós não nos importamos. Então precisamos obter apenas os dados porque os dados retornarão para mim apenas página e resultados até agora que, como você sabe, precisamos verificar como a resposta continha. Então, o que está contendo, então eu, Eu coloquei ponto e como você vê aqui, esse eixo retornou para mim campos extras para esta resposta. Um deles é o Data. Aqui, os dados são armazenados dados que estão vindo da API. Outras coisas como cabeçalhos de status, vamos vê-los. Vamos ver como, por exemplo, o status para 0 para como a API não encontrada, et cetera. Então, por enquanto eu vou obter apenas os dados que estão vindo dentro dessa resposta. Digamos que vá novamente ao terminal para verificar se está tudo bem. Vamos para o nosso terminal. Ok, legal. Estamos recebendo agora apenas os dados, mas é uma lista muito longa. Vamos fazer um filme. Então aqui, se você se lembra, eu recebo os dados e dentro dos resultados, é array. E dentro desta matriz conterá filmes. Então, cada membro desta matriz é um filme. Vamos pegar o primeiro. Então eu vou voltar para o código e então eu vou dizer aqui, não retorne para mim, todos os dados retornados para mim, resultados. Ok, você não pode encontrar aqui resultados porque os dados são quaisquer, eles são desconhecidos. Não podemos ver no editor o que a API é muito pequena retornando. Então eu tenho que ter certeza de que tudo bem, eu tenho resultados. E então exatamente como temos em relevo homem ou no terminal. E então eu vou obter o primeiro resultado. Para obter resultados piores, colocamos esta matriz tags e colocamos 0. Então, a primeira entrada deste array. Então eu vou para o terminal. Mais uma vez, vamos até o fim. Podemos ver lóbulo aqui. Então significa que começou um novo registro. E neste registro, você vê que temos um filme. Então, isso é muito bom. Agora estamos prontos para exibir este filme em nossa aplicação aqui. 21. Exibir dados de filmes: Ok, então agora em vez de exibir Olá Mundo, vamos exibir um filme e o filme que temos no console. Vamos exibi-lo aqui. Ok, Primeiro de tudo, temos que distinguir entre o modelo ou o modelo de React Native e o código JavaScript. Assim, quando obtenho alguns dados através de um serviço, quero exibi-los no modelo. Como podemos fazer isso. Não posso ir assim. Por exemplo, eu vou aqui e eu colocar o método aqui e, em seguida, ok, que, que eu fui exibido. Não, não é possível assim. Precisamos primeiro para obter os dados para a nossa aplicação, que está na função AP, e, em seguida, exibir os dados que são retornados a partir da API ou do próprio serviço. Então, primeiro de tudo, temos que retornar os dados. Então, em vez do console registrar os dados, eu quero retornar esses dados. Então, podemos dizer dessa forma retornar e os dados que não precisamos mais para o stringify JSON porque usamos apenas para estilizar esse código na ordem em que a saída no log do console. Agora temos mais e filme retornado por este método. Ou podemos chamar esse método de obter filme popular, mas agora temos filmes. Então vamos devolver todos os filmes primeiro. Então, esse método retornará para mim filmes populares. Mas este método, Como agora eu posso usá-lo no aplicativo. Então, se eu for agora aqui e disser ponto após o método, depois que eu chamá-lo, eu vou chegar aqui então, porque este filme agora está retornando uma promessa. Por que está retornando uma promessa? Porque eu usei como método assíncrono. E métodos assíncronos, retornando promessas. Prometo dizer, como te prometo dar-te dados assim que os conseguir. Então, aqui, este método, está nos prometendo com git atua anos quando os dados estão prontos, então ele irá devolvê-los para nós. E então é uma função de retorno de chamada. Então, podemos usar o retorno de chamada para obter os dados que são retornados a partir desta função. Então eu posso fazer aqui algo como se pudéssemos dizer filmes. E depois disso, é uma função de retorno de chamada. Então podemos usar um método de linha para recuperar os filmes. Então nós podemos apenas, para um teste rápido, eu só quero fazer o log do console aqui. Então, para ter certeza de que eu estou realmente recebendo os filmes aqui. Então vamos tomar também o primeiro filme, porque aqui retornamos apenas os resultados. Então, depois disso, eu vou para o registro do console, ok, tudo está bem. Consegui o primeiro filme. Ok, agora o nosso caso é apenas para substituir este Hello World, por exemplo, pelo nome do filme. Como eu quero usar o campo de título original. Então eu quero apenas imprimir o título original para que eu possa dizer original e sublinhado apertado. Ok, agora, como você vê aqui no diário, eu tenho apenas o título original. Ok, então de alguma forma nós precisamos substituir este HelloWorld pelo método ou algum valioso que eu possa criar. Por exemplo, posso dar-lhe um nome como título. E este título terá, por exemplo, inicialmente algum título. Então, se eu quiser usar esta variável dentro do texto aqui, então em vez de Olá mundo, eu posso colocá-lo aqui, mas não apenas título, mas podemos cercá-lo com colchetes curvos. Então aqui eu posso fazer um colchetes curvos. E então eu digitalizei dizer aqui, por exemplo, nome do filme. Ok, eu tenho aqui o título, nome do filme é impresso aqui. Ok? Agora, se eu for e eu disser, ok, não console log, mas fazer Título é igual ao nome do filme ou o título original do filme. Quando eu salvar, então eu vou ver que eu ainda estou recebendo o nome original. E é como se nunca tivesse acontecido aqui. É como o título, não muda. Então, quando eu recarregar o aplicativo salvar, ele ainda está no nome do filme. O problema aqui é porque o título é definido depois que o modelo foi inicializado. Então, talvez isso, em seguida, está sendo executado após O título Gut inicializado no modelo e renderizado e exibido. Então precisamos de alguma forma atualizar o título. Até mesmo o modelo é carregado. Então, para isso, precisamos usar algo chamado estado Reagir nativo. O Estado é muito importante. Não usamos variáveis normais como esta. Usamos o Estado. Então qualquer coisa ou qualquer variável que você deseja criar e exibi-lo no modelo, você precisa usá-lo como um estado, especialmente quando esta variável está sendo atualizado após algum período de tempo. Então, como podemos fazer isso para definir um estado, eu vou usar a mesma coisa. Então podemos dizer const. E então eu abro um array, e este array terá duas coisas. Por exemplo, o nome da variável que você deseja criar. Por exemplo, vou dar um objetivo como um filme. E o segundo parâmetro do nosso segundo item desta matriz será definir o filme. Então eu quero fazer set de filme. Então este será um método onde eu vou usar em minha aplicação e usá-lo aqui quando os dados estiverem prontos. Então podemos ir aqui e dizer Igual para usar estado, usa data. Vai ser importado de reagir. Então é algo interno no React. Então vamos usar este valioso como uma variável de estado para que ele possa ser atualizado depois que eu fizer, por exemplo, a renderização desse modelo. Então, para isso, eu vou aqui, eu não uso mais um título. Eu só digo set title ou sets de filme. E este filme, nós vamos ter não só o título porque nós vamos usar um título em outro lugar. Então nós definimos o primeiro filme que está voltando do serviço para set filme. Nesse caso, filme, teremos um estado ou tem um valor do primeiro filme que é retornado do serviço. Então, quando eu vou aqui para o filme e substituí-lo aqui, então nós salvamos, nós vamos ter um erro porque sempre um estado que você precisa inicializá-lo de alguma forma. Nem sempre é, mas é melhor inicializá-lo. Então, agora, por exemplo, eu posso inicializá-lo com string vazia. Então esta data ou este filme será inicializado como uma string vazia. É claro que vamos ver como podemos lidar com isso de forma diferente, mas vamos passo a passo. Então agora eu economizo, mas ainda estamos recebendo um erro. Está dizendo que objetos não são válidos em Reagir criança porque aqui filme é definido como um filme e este filme é um objeto. Se você se lembra, carteiro, este filme é um objeto, contém um autor adulto, você uma visão geral, popularidade, etc. Então precisamos usar um dos campos deste filme. Então eu vou dizer aqui, este filme ponto título original. Então eu quero um campo deste filme. Então, quando eu recarregar o aplicativo e salvar, eu vou ver que eu tenho o título do filme. Ok, você pode adicionar outra coisa. Por exemplo, podemos adicionar, como podemos dizer, vamos verificar os campos aqui no idioma Bozeman. Certo, não conseguimos o idioma original e podemos exibi-lo aqui. O profano e, em seguida, E n. Claro que você pode misturar também com as cordas para que você possa dizer o nome do filme. E será algo como o profano. E também a língua. Você pode dizer que será e n. Vamos adicionar outro campo de texto. Por exemplo, vamos duplicar este. E, por exemplo, vamos para a nossa API e obtemos a data de lançamento. E vamos para a data de lançamento, colocamos aqui. E nós podemos digitar aqui liberação. E vamos recarregar o aplicativo e veremos a data de lançamento está aqui. Então, nesse caso, usamos o estado, que é muito importante porque o estado está configurando automaticamente a variável após algum período de tempo ou o período de tempo, quero dizer, aqui está recebendo os dados do servidor . Então é assim que estamos exibindo os dados da API para o nosso aplicativo. 22. Usando efeitos: Após a palestra anterior e talvez você tenha notado que a CPU do seu PC tem um maior e está usando muitos recursos por causa da mudança que fizemos anteriormente. Então eu fiz uma palestra separada para isso porque é muito importante antes de começarmos nosso projeto conhecer esse problema. Então, como você vê aqui, temos nosso aplicativo Movi no meu monitor de atividade ou no Gerenciador de Tarefas no Windows, você verá que ele está usando 183% da CPU. Isto é porque temos que fazer a gestão do Estado sem usar os efeitos. Afetar é algo para permitir que você execute efeitos colaterais em um componente de função, que é como refletir a relação entre o DOM e também esse estado de sua aplicação. É muito importante quando você está usando alguns métodos assíncronos e você está sentado propriedades ou definindo uma variável, você coisas propriedade, você precisa usar efeitos. Então, como podemos usar esses efeitos? Normalmente, os afetos podem ser usados depois de definir as variáveis de estado. Então você só vai aqui e você pode dizer exatamente como nós fizemos aqui usa estado, você vai usar efeito. Então podemos dizer efeito de uso. Estou explicando isso em palavras mais simples se você não está familiarizado com React. Então agora temos esse enorme efeito. Ele terá uma função de retorno de chamada ou método de retorno de chamada, que iria conter e executar para mim a API que eu tenho ou o serviço que eu criei para definir um filme. Então, sempre com que FH King configurando assinatura e manualmente muda no dormitório com Reagir necessário para usar efeitos. Por isso, é melhor tê-los não têm loop ilimitado entre o DOM e também a gestão do estado em React. Portanto, os efeitos estão sendo executados uma vez apenas para garantir que só estamos recebendo os dados uma vez. Então, para isso também, você precisa passar um parâmetro que está vindo no final como um segundo parâmetro de função de efeito dos EUA, que será uma matriz vazia. Então, se você quiser atualizar os dados ou chamar esta função assíncrona várias vezes, você pode especificar o tempo aqui. Quero atualizar meus dados a cada 1 segundo. Então você verá em sua aplicação esses dados são obtidos do banco de dados ou da API a cada 1 segundo. Por enquanto só precisávamos ser executados uma vez. E o efeito de uso está vindo também de reagir exatamente como vamos usar a propriedade. Então vamos salvar isso novamente e recarregar o aplicativo. E você verá agora como meu monitor de atividades está se acalmando. Então, como você vê aqui, aplicativo de filme agora está usando 0,3% do processador. Então, dessa forma, estamos fazendo a coisa certa. Tenha cuidado. Você sempre tem que usar os efeitos para fazer o gerenciamento correto dos estados entre o DOM e seu estado na aplicação de React Native quando você quer verificar o desempenho de seu aplicativo. Por exemplo, para ver quanta memória ele está usando e quanto, por exemplo, quais são as solicitações que estão indo para lá. Portanto, é melhor usar a ferramenta que é fornecida aqui com as ferramentas de desenvolvedor. Assim, você pode monitorar sua rede e também seu desempenho. Então você só precisa no telefone para pressionar Controle D. E no Controle D você verá inspetor curto. Então, com o Show Inspector, você verá várias coisas. Um deles é a rede. Assim, por exemplo, quando eu recarregar o aplicativo, verei que meu aplicativo envia uma solicitação para esta API. E, em seguida, quando você clicar sobre ele, você verá detalhes sobre ele. Portanto, é muito importante usar isso para saber o que está acontecendo lá. Então eu quero mostrar a vocês como, o que vai acontecer quando eu colocar este método, que eu estou chamando os dados para fora dos efeitos, como nós fizemos, como ele foi feito antes. E eu vou te mostrar como está fazendo isso. Tempos ilimitados. Então, quando eu clico nele, você vê que são vezes ilimitadas. Está pedindo dados do servidor, o que é totalmente errado. Vamos parar com isso rápido para não ter um problema aqui. Então, agora, se nós vemos que não estamos tendo mais nenhum loop. Também há algo mais que você pode pressionar Control D para C também o monitor de desempenho. Ele irá mostrar-lhe sempre quanto aplicativo ou seu aplicativo está executando aqui, que é muito útil, benéfico para a sua aplicação. Assim, você sempre pode ver quanto RAM está usando e quanto outros dados, que são muito úteis para você durante o desenvolvimento. Se você quiser saber sobre afeto gancho, que está vindo de Reagir, você basta ir para Reagir documentação js.org e, em seguida, você contar encontrar efeito de farsa. Você vai entender mais com você não sabe nada sobre Reagir. Mas neste caso aqui, você pode considerar que o efeito é gerenciar seu estado e suas funções e buscar os dados entre o DOM e também o aplicativo React Native. 23. Tratamento de erros de serviços: Certo, e se tivermos um problema com nossa API e o servidor não estiver respondendo. Então, queremos exibir uma mensagem para o usuário em algum lugar aqui para dizer que ok, há um erro no servidor. Então, para fazer isso, é muito fácil. Podemos implementar isso muito rapidamente. Então, primeiro de tudo, precisamos ver se temos erro ou não. Então, depois disso, o método then, como você vê aqui, podemos ter algo como pegar e pegar. Você pode detectar os erros que podem acontecer em sua API. Então eu vou dizer aqui erro, e será exatamente um método de retorno de chamada também. Então este método de retorno de chamada, eu posso fazer algo como console o erro ou substituir mensagem de erro. Até agora que eu vou usar outra constante de estado, que será chamado de erro. Então este vai estar aqui, erro. E então eu posso dizer set error. E também, vamos usar o estado. Então, para isso, eu vou dizer que set error estará aqui, o erro em si. Então, depois disso, vamos exibir mensagem de erro para o usuário se houver algum erro detectado. Até agora que podemos, por exemplo, usar tag de texto, exatamente como fizemos anteriormente. Só estou simplificando as coisas. Você pode entender. Então aqui vamos ter um texto e, em seguida, podemos exibir como erro no servidor. E também você pode fazer algum estilo nele. Você só faz um estilo. E este estilo que você pode ser, pode ser um objeto como você vê aqui. É exatamente o mesmo padrão. Então, esse estilo pode ser tão bem cor. Podemos dar cor, e essa cor será vermelha, por exemplo. E vamos salvar isso para ver que tudo está bem, ok, temos um erro no servidor. Então eu quero mostrar esta mensagem quando houver um erro. Então, como podemos fazer isso? Então, primeiro de tudo, você faz objeto. Então aqui você tem que abrir dois colchetes. E este colchetes que contêm a constante de estado que criamos anteriormente. E então você pode dizer e adicionar dentro deste objeto, você coloca este texto, então você corta e coloca aqui. Então, quando houver erro, mostre esse texto. Isso é como se houver erro e texto, então mostre-o. Então, desse jeito. Então, quando nós salvamos e como você vê, eu tenho um erro. Ele diz string de texto deve ser renderizado dentro um componente de texto porque este erro é inicializado como uma string, então precisamos dar-lhe um valor inicial. Portanto, o erro por padrão é falso. Como não vemos nenhum erro por padrão. Mas quando este esboço irá atualizar o erro e fazer definir erro para ser erro. E então será ter um valor e será algo que pode ser renderizado aqui. Então, para isso, podemos apenas inicializar isso para falso. E então, tudo está funcionando bem. Não temos erro. Vamos cometer erro em nossa API, por exemplo, eu vou remover esta carta aqui, o b. Então, quando eu fizer Salvar, eu vou ver que eu tenho em ou no servidor. Quando eu removê-lo, o erro permanecerá porque não temos três carregado totalmente o aplicativo. Precisamos esvaziar o estado deles. Aqui estamos apenas usando uma recarga quente. Hot Reload está apenas fazendo as coisas que são atualizadas no DOM. Mas também precisamos recarregar o aplicativo, para recarregar toda essa data aqui. Então, como podemos fazer isso? Então você só precisa ir para o DevTools novamente. E então queremos recarregar totalmente o aplicativo. Então você pode clicar em Controle D e, em seguida, você tem algo aqui, recarregar. Então, dessa forma, você recarregará todo o aplicativo novamente. E você vai se certificar de que você não está atualizando ou tendo esse erro novamente porque temos a API correta. Então essa recarga significa que estou abrindo o aplicativo. O usuário está chegando ao meu telefone e abra o aplicativo pela primeira vez. Então este é o significado desta recarga. É muito importante saber que você pode recarregar seu aplicativo ou você pode pressionar também. Controle nosso controle são irá ajudá-lo a recarregar o aplicativo totalmente sem abrir o menu Ferramentas de Desenvolvimento. Então, quando cometermos um erro aqui e salvar, ok, Nós teremos o erro. Vamos recarregar o aplicativo. Ok, nós temos árvores de linguagem de nome de filme, eles estão vazios, então nós não temos nenhum dado aqui porque nossa API está errada e isso está nos dando um erro no servidor. Faremos tudo isso bonito nas próximas palestras durante o nosso curso. 24. Refactoring na primeira seção: Ok, nesta palestra, vamos fazer alguma refatoração. Por exemplo, sempre os serviços que agarrando dados do servidor, algo assim, estão vindo em arquivo separado. Então eu vou criar uma nova pasta aqui. Podemos fazê-lo na raiz da pasta. Assim, podemos criar uma pasta, podemos chamar serviços de TI. E esses serviços vão conter meus serviços, que eu quero criar aqui. Então eu criei uma pasta e então nós temos um arquivo. Podemos chamar-lhe serviços dot js. Dentro dos serviços, eu vou ter a chamada desta API, por exemplo, eu vou pegar este e ir para os serviços e colocá-lo aqui. Então, o que eu preciso para isso para importar eixo. Então também precisamos copiar esta Importação e ir novamente aos nossos serviços e depois colocá-la aqui. Então agora temos filmes populares, mas os filmes populares são agora indefinidos aqui. Então precisamos importá-lo. Então, primeiro, eu preciso exportar esse método. Portanto, tenha cuidado, você tem sempre que exportar as coisas de forma a usá-las em outros arquivos. Então aqui eu vou ter também importar e eu vou importar este método. Então aqui é este o método. E então eu digo de, e então isso será ponto como eu estou no caminho atual do app.js e então eu vou dizer serviços, e então eu iria selecionar o arquivo de serviço. Então, desta forma, eu importei o método da maneira certa. Depois disso, vamos salvar tudo. Então eu salvo os serviços aqui e também salvo seus serviços no app.js. Agora nos certificamos de que tudo está funcionando bem. Nós separamos nossos serviços. Então, outro passo que podemos fazer aqui que podemos fazer alguns comentários, adicionamos lado como algum comentário. Podemos dizer como explicar este método. Então, por exemplo, eu posso dizer obter filmes populares. Então, dessa forma, você pode explicar a outros desenvolvedores que este é o serviço para obter filmes populares. Além disso, podemos fazer algo grande como não temos que adicionar tudo isso Nyquist vai, vamos criar outros serviços no futuro, então não temos que repetir este URL várias vezes. Então, para isso, eu prefiro usar algo como uma variável. E podemos usar essa variável em todos os lugares. Então eu posso dizer aqui const, e então eu posso dar algum nome ao valioso. Podemos dizer URL API. Nesta URL API, teremos essa coisa aqui. Então, depois disso, podemos usar este URL API como vemos aqui. E então podemos combiná-lo com esta matriz de filmes. Então, como podemos fazer isso, nós só precisamos abrir algo como um chamado backticks, este sinal e esta linha que você pode usar como dólar. E então com isso, como o advogado pode colocar variáveis que estão dentro do mesmo arquivo. Então você pode ter aqui API URL e dentro deste URL API ou depois dele, você pode dizer barra. Então seria considerado como uma string aqui. Então tudo isso, o que está escrito aqui, pode ser uma string, então eu posso copiar toda essa parte e remover essa string também e colado aqui. Também a chave é muito bom tê-lo separado, também valioso. Então também podemos criar aqui uma chave. Podemos chamar de constante. E, em seguida, chave API de nossa API, e nós fornecemos dentro dessa string. Então aqui temos chaves API, ou eu só preciso chamar novamente estes como cifrão. E depois disso, vou colocar a chave API dessa maneira. Então eu vou me certificar da URL. Assim, o URL já construído como com este prefixo, como vemos em nossa API. E então podemos ter barra e, em seguida, mais v popular. O que queremos comprar? Porque vamos ficar populares. Tínhamos filmes de família, teríamos filmes futuros. É a curva. E então eu vou baixo um ponto de interrogação para passar o parâmetro da chave API, que eu armazenei na chave API aqui. Então vamos salvar tudo e verificar se tudo está funcionando bem. Vamos fazer Hot Recarregar ou recarregar completamente. Está bem, Legal. Não temos nenhum problema aqui. Então agora temos os serviços em arquivo separado e você pode criar outros métodos. Por exemplo, aqui podemos fazer os filmes populares, podemos fazer filmes pop próximos. Por exemplo, a próxima API de filmes será seguida com o próximo. E isso já é, eu sei a partir da documentação API deste filme. Então, podemos dizer aqui, até próximos filmes, porque vamos usá-lo também em nossa aplicação. Vamos também verificar outras APIs. Por exemplo, salve aqui. E vamos tomar outras APIs que podemos ter a partir da documentação. Então eu vou novamente para a documentação API do banco de dados de filmes. Então vamos ampliar um pouco também, para que você possa vê-lo bem. Então aqui vou eu ao cinema, por exemplo. Onde está aqui, filmes. Então vamos obter algumas APIs que estão indo para usar em nossa aplicação. Por exemplo, vamos ter popular e próximo, como eu disse, talvez você possa obter também top-rated. Vamos fazer uma série de TV. Então, por exemplo, temos uma equipe e temos também a popular. Então vamos ficar populares. E aqui é exatamente o mesmo. Então é exatamente como nos filmes, mas só precisamos adicionar aqui. Então copiamos o filme popular e colamos aqui. E podemos dizer que a TV popular é d dt de filmes. E aqui teremos tão bem TV como podemos torná-lo este método obter TV popular. E nós apenas mudar isso para TV é Td de filmes como vimos a documentação. Então economizamos, agora temos a TV popular. Assim, desta forma, temos todas as APIs que precisaremos. Talvez precisemos de mais como veremos no aplicativo. Então nós vamos adicioná-los aos serviços e como nós editamos fatoração aqui. Então, na próxima seção, ou por enquanto para esta seção, aprendemos como usar a API. Então aprendemos como pegar dados do servidor e exibi-los em nosso telefone. E então veremos mais tarde como estilizar as coisas. Vamos começar com a página inicial e vamos construir a primeira página do nosso aplicativo na próxima seção. 25. Criação de componentes de tela de casa: Tudo bem, agora nesta seção vamos ver como podemos criar o componente homepage. Como você vê aqui, eu sou capaz de navegar sobre os filmes através de um controle deslizante onde eu vou criar na página inicial. E também, eu tenho vários controles deslizantes para todos os tipos de filmes. Por exemplo, como você vê aqui, temos programa de TV popular, temos família, temos documentários, todos eles, chamamos eles nos serviços. Então eu tenho essa versão em execução no meu dispositivo. Estou a usar viseira, mas é claro que vamos implementar isso e continuar a nossa codificação para chegar a este nível, como vêem aqui. Então, primeiro de tudo, vamos criar um componente de página inicial. E este componente homepage, vamos chamá-lo no componente App ou para o ponto de entrada do nosso aplicativo. Então, quando eu abrir o aplicativo, eu vou ver isso. Então vamos começar agora com a criação do componente homepage. Ok, no início, eu gostaria de mover todo esse código que criamos anteriormente para um novo componente. Chamamos isso de componente de página inicial. Então, primeiro de tudo, vamos criar um arquivo ou uma pasta. Chamamos-lhe ecrãs. Então eu clico aqui neste ícone e digo que eu quero telas. E se você ver como às vezes ele é criado dentro de outra pasta, basta clicar novamente e, em seguida, basta clicar , por exemplo, em app.js para estar no nível raiz. Então você será capaz de criar a pasta no nível raiz. Então eu vou dar este nome desta pasta será telas. E dentro deste greens, eu vou criar um novo arquivo. E este arquivo será chamado home dot js. Então podemos dizer que esta é a página inicial da minha candidatura. Então, se você se lembra antes, eu lhe disse para instalar alguma extensão é muito importante para acelerar nosso código. Então, por exemplo, eu quero criar um componente rapidamente. Assim, com as ferramentas React Native snippets, você também pode criar um componente. Então eu quero te mostrar isso. Então, quando você vai para as extensões que instalamos anteriormente, você verá muitos comentários. Um deles, como nós, pode criar retorno de componente sem estado. Então vamos usar este formato porque como você vê aqui com React, temos um componente e então temos um retorno. Então aqui nós podemos definir nossas variáveis porque eu quero mostrar a vocês os dois casos. Então, se você for aqui, vamos dizer, por exemplo, vamos criar este componente sem estado. Então eu vou dizer como L e ele irá automaticamente completar para mim. Então eu criaria um componente, mas nesse caso, eu não tenho um retorno, então eu não posso definir minhas variáveis. Fácil. Então agora podemos criar outro componente, que é com retorno S L, retorno componente sem estado. Assim, com isso, criaria para mim um componente e também se o retorno e todas as coisas em cada componente também. É muito importante importar React. Assim, também há um comentário para isso. Então, nesta extensão, se você for lá, veja IMR importação React. Então, como podemos fazer isso rapidamente. Então você apenas colocar aqui eu, MR e então ele vai importar para você reagir rapidamente. Então agora vamos mover o código do aplicativo e, em seguida, para a página inicial. Então, se você se lembra, temos no app.js, definimos alguns valiosos. Vamos mover todos eles. Vamos fazer um instinto como se pudéssemos cortá-los completamente antes do retorno. Então, todas essas variáveis antes de retornar, vamos pegá-las e colocá-las aqui antes do retorno da nossa aplicação em casa ou página inicial ou componente Hong. Agora, vamos pegar tudo o que está dentro desta visão. Então, também podemos tomar tudo isso, tudo o que podemos ter toda a vista. Então, tudo dentro que Ele desligou app.js. Então vamos aqui e colamos dentro de um componente de retorno de casa. Então colamos tudo aqui. E não esquecemos que copiamos as importações. Vamos agora copiá-los, não temos porque precisaremos de alguns deles mais tarde. Então agora eu vou copiar todos eles e colá-los aqui. Então, quando eu pressionar Salvar OK, ele será formatado automaticamente porque eu tenho mais bonito, agradável. Agora eu vou para AS e, em seguida, eu salvar, então nós não receberíamos erro token inesperado porque nós precisamos colocar algo dentro deste aplicativo. Precisamos colocar uma visão para que possamos muito bem colocar esta visão que estava aqui com o aplicativo Hello World. Se você se lembra, veio com um pouco de estilo. Então vamos copiar o mesmo e colocá-lo aqui dentro, a vista, e a vista vai ser fechada como você vê aqui. Então, depois disso, salvamos, ok, tudo está bem. Mas agora temos app.js vazio. Então precisamos chamar aqui o componente de casa, a casa que criamos aqui. Então, para isso, podemos apenas digitar como uma tag home. E como você vê, é sugerido para eu importá-lo de telas de casa. Então, dessa forma, eu também posso importar este. E como você vê aqui, temos importação para casa de telas para casa. Quando eu salvar, recebemos um erro. Esse erro vem do componente inicial como você vê, porque o componente inicial, se você se lembrar, está dentro da pasta telas. Então, quando estamos importando o serviço de filmes populares bens, não precisamos estar no mesmo nível da pasta porque aqui temos dentro desta pasta verde em JS está dentro de telas. Então precisamos dar um passo para cima e então chamamos o serviço. Por isso, preciso de subir. E, em seguida, eu entro para componente de serviço ou pasta de serviços e, em seguida, eu chamo os serviços JS. Então, para ter certeza mais você pode excluir tudo isso e você colocar ponto e, em seguida, barra. E sugeriria para você a pasta. Então você verá que não há nenhuma pasta. Então você precisa subir um nível. Então, quando você subir um nível, você terá acesso às pastas que criamos no nível superior deste componente home. Então eu vou para os Serviços e, em seguida, corte e, em seguida, eu chamo os serviços, os serviços dot js. Então agora tudo está bem para o componente doméstico. E, como você vê, o app.js chamou o componente inicial dentro dessa exibição. E então ele será processado exatamente como nós criamos aqui. Então, esta é uma maneira como você pode dividir sua aplicação. Você pode dizer, por exemplo, Eu vou ter tela inicial, Eu procurei tela, Eu vou ter bem um detalhe da tela do filme. Então, dessa forma, seremos capazes de dividir nossa aplicação. E também, você tem que lembrar que se você não conseguir tudo que você não colocar estilo aqui, talvez você não vai ver nada se você colocar apenas vista. Porque agora você não pode ver porque todos os itens estão aqui. Então vamos falar sobre o estilo mais tarde. Vamos dar as coisas assim agora. E nós apenas salvamos como está. E no final removemos as importações que não precisamos. Por exemplo, não precisamos deste. Nós não precisamos, bem os efeitos e nós não precisamos deste, que é chamado de texto. Então vamos salvar tudo. Agora estamos verdes e podemos trabalhar bem. Na próxima palestra, vamos ver como podemos criar o controle deslizante, a primeira página, ou o controle deslizante que está no topo, que contém imagens dos meus filmes. 26. A última imagens de filmes: Tudo bem, nesta palestra vamos ver como podemos criar este controle deslizante. Pegávamos as últimas imagens dos filmes deles, dos filmes mais recentes. E nós estamos indo apenas para fazer um controle deslizante para que ele possa ser deslizado automaticamente para que as pessoas, quando eles abriram meu aplicativo, eles possam ver imagens de filmes mais recentes. Assim, para este controle deslizante, há um componente que é chamado Reagir controle deslizante nativo. Nós vamos usá-lo. Portanto, o uso de componentes requer sempre instalar algumas bibliotecas externas. Para isso, vamos instalar uma biblioteca que irá conter este controle deslizante e vamos usá-lo em nossos componentes homepage. Então vamos passar para o nosso código. Há uma biblioteca que é chamado Reagir caixa deslizante imagem nativa. Então vamos colocar no Google. Podemos dizer Reagir imagem nativa, livros deslizantes. Então todo esse nome, você procura por ele e você vai tê-lo na biblioteca NPM. Então agora vamos a esta biblioteca e podemos ver a documentação sobre ela e como podemos usá-la. Como vê, temos aqui a biblioteca. Então, antes de tudo, precisamos instalá-lo. Então vamos para npm, instalar Reagir caixa deslizante imagem nativa. Então vamos lá e vamos abrir o terminal e depois colamos o nosso comentário. Então npm instalar, Reagir caixa deslizante imagem nativa. Então, até a instalação terminar, vamos dar uma olhada aqui. Assim, podemos ter, primeiro lugar, alguns componentes. E esses componentes, podemos usá-lo em nosso modelo. Há também um exemplo. Então você pode dizer aqui, importar caixa deslizante. Temos que importar esta caixa deslizante para o nosso código. E então criamos uma visão. E esta vista, que será uma caixa deslizante, irá conter uma matriz de imagens. Então nós estamos indo também para construir esta matriz de imagens. Então aqui a nossa biblioteca foi instalada. Vamos para lá e para a documentação. E vamos ver primeiro, como precisamos importar caixa deslizante da caixa de controle deslizante da imagem nativa. Então vamos aqui e no componente da página inicial, vamos importar essa caixa de controle deslizante. E depois disso, vamos fechar o terminal ou escondê-lo de alguma forma para termos mais espaço aqui. E então vamos ver como ele está usando esse componente. Então, no slide lá, uma caixa em Reagir nativo, ele tem controle deslizante evoca imagens. Então é necessário que tenhamos algumas imagens. Então vamos remover a parte que criou anteriormente este nome de um filme e todas essas coisas. Então vamos removê-los para que possamos manter apenas a vista porque eu lhe disse a vista, será como uma div para mim, um div ou um recipiente que irá conter tudo dentro dela. Então, vamos para a documentação deles e chamamos esta linha. Então dizemos slide lá caminha imagens. Vamos de novo. E chamamos esse slide lá caixa como importamos aqui. Então vamos guardar isso. Vamos entrar no simulador e erro. Mas não se preocupe, porque não estamos tendo as imagens certas aqui. Então nós precisamos ter todos criar as imagens. Então, para isso, primeiro de tudo, precisamos criar uma variável de estado. E esta variável de estado , será preenchida com as imagens dos próximos filmes. Então vamos chamar isso de constante não de filme. Podemos chamá-lo de imagens de filmes, por exemplo. Então precisamos definir também isso para ser filmes ou filmes imagens ou mais dessas imagens. Então, dessa forma, temos o nome certo. E agora vamos usar isso para conseguir filmes populares. Mas no nosso caso, queremos pegar os próximos filmes. Então nós criamos um serviço antes, como você se lembra, nós acabamos de chamar “Get Amorphous”. Então vamos pegá-los. E eu vou ficar com este, manter este método. Então vamos criar outra chamada para manter próximos filmes. E estes manter os próximos filmes, vamos chamá-lo novamente a partir deste airless. Então, dessa forma, precisamos importá-lo também. E será exatamente o mesmo. Então vamos precisar também, então, e pegar. Então também podemos usar a mesma sintaxe que criamos aqui para filmes populares, mas não temos mais set movie. Portanto, podemos remover esta parte não terá um AdWords. Então, vamos voltar a este serviço mais tarde, quando vamos usar ou criar os outros controles deslizantes. Então, por enquanto, vamos ter imagens de filmes aqui, mas onde vamos usá-lo. Então precisamos de imagens aqui de alguma forma. Não podemos ter os filmes, o filme inteiro. Então, por isso, se você se lembra, eu estou devolvendo os filmes com sua chamada de volta aqui. Então podemos usar esse retorno de chamada para criar uma constante. Então eu vou criar constante, Eu posso dar-lhe um nome que é chamado de filmes imagens. Mas as imagens deste filme para não ter um conflito com este nome. Nós daríamos a ele também algum sufixo. Não podemos chamá-lo de array. Então, dessa forma, ele será inicializado com matriz vazia. Então, quando eu receber os próximos filmes, eu não tenho nada nessa matriz. Então vamos preencher esta matriz. Então, vamos dizer filmes. Imagens, envio de pontos da matriz. Então vamos empurrar filme por filme. Assim, desta forma, teremos aqui vários filmes. Então, antes disso, eu vou aqui para outra linha e eu vou dizer filmes ponto para cada um. Mas podemos escrever isso, sem problemas. Então você pode ter filmes para cada um. Porque se você se lembra, estávamos voltando do próximo serviço. Estávamos sempre retornando resultados de pontos de dados. E se formos ao Carteiro, como se lembram, temos aqui nos resultados da matriz. Então todos eles com venha aqui. Então vamos voltar ao nosso código e, em seguida, vamos adicionar exatamente a mesma sintaxe. Então, para cada filme dentro matriz de filmes, que é retornado a partir da API, eu vou obter um filme. Então, a partir disso, para cada um, eu vou obter um filme e este filme ou uma função de retorno onde ele, eu posso usá-lo para usar este filme a partir dessa função callback. Então eu posso mover então estes filmes matriz para empurrar o filme, que eu tenho aqui. Mas nós não queremos empurrar o filme em si onde você precisa empurrar apenas a imagem desse filme. Então, se formos novamente para o Postman para ver o que é o conteúdo desta API, Vamos tomar primeiro filme, por exemplo, como eu disse, os resultados contêm vários filmes. Então vamos obter o primeiro resultado. Um desses campos que reforçámos o caminho. E neste caminho de cartaz, eu vou ter a imagem do filme. Então vamos pegar este. Eu vou aqui e vou dizer mais. Nós não poster caminho. Então empurre para mim o caminho do cartaz do filme. E depois disso, filmes imagens matriz será definido filmes imagens. Então precisamos definir essa variável ou essa variável de data que criamos. Então aqui eu vou dizer filmes imagens matriz será dentro filmes imagens. Então vamos salvar tudo. Agora, nós formatamos nosso código, e dessa forma, poderemos usar imagens de filmes onde no controle deslizante. Então, teremos aqui imagens da caixa deslizante. Serão as imagens dos filmes. Então, as imagens de filmes de campo. Vamos guardar isso e ir para o simulador. E veremos que não podemos ver nada porque precisamos dos parceiros. Precisamos também do caminho completo. Se formos para Postman, veremos apenas parte da imagem, como apenas o nome da imagem. Então isso deve ser prefixado com alguma coisa. Se formos para a documentação do filme que obedece API, há algo aqui após a introdução que é chamado de imagens. Dentro dessas imagens, ele vai nos mostrar como podemos obter essas imagens porque como eu disse que Boston Bath está retornando apenas o nome da imagem. Então, para obter o caminho completo da imagem, você deve prefixá-lo com o link onde você vai obter esta imagem. Então vamos prefixar nosso caminho de imagem com esse nome. Então, dessa forma, então quando eu empurro os itens para a matriz, dessa forma, eu só preciso empurrar também o caminho. Então podemos dizer aqui, basta empurrar este link que nós copiamos antes, e então nós dizemos mais. Então você pode dizer isso como prefixo. E, em seguida, o caminho do cartaz que está vindo com o filme como você vê aqui. E vem sempre com uma barra. Então você não precisa colocar uma barra no código. Então, podemos remover esta barra, porque desta forma você terá duas barras. Então, depois disso, podemos salvar tudo, ir para o nosso simulador. E como podem ver, temos aqui as imagens. Então agora estamos recebendo as imagens mais recentes dos filmes mais recentes ou próximos filmes. 27. Estilizando filmes: Ok, agora nesta palestra vamos ver como estilizar este controle deslizante. Primeiro de tudo, se você vê aqui que temos alguma reclamação de ES fiapos, que é como corrigir para mim os erros no meu código como ao vivo, Eu falei sobre ES ligado anteriormente. Então ES nomeado está reclamando que temos que colocar os estilos em algum lugar fora do componente. Isso é como estilo de codificação, como ou estilos inline. Isso é chamado de estilo inline. Então, quando você tem inline estilo ES fiapos, nós reclamamos sobre isso. Então, é melhor colocá-los em algum lugar fora desses componentes. Então, como podemos fazer isso? Nós não podemos definir fora de casa componente, como você vê aqui. Lá fora, podemos definir uma constante. Nós chamamos isso de estilos em geral, como estilos normais. E este estilos será vindo de folha de estilo e componente folha de estilo. Devemos importá-lo de React Native. Então eu vou aqui e eu vou chamar a folha de estilo React Native de React. Então, quando voltarmos aqui agora, terei um método dentro disso que será chamado criar. Então eu vou criar um arquivo de estilo ou vários estilos que eu posso usar dentro do meu componente. É como para nós no caso de HTML, como um arquivo CSS. E este arquivo CSS conterá classes, então eu posso usá-las em meus componentes ou em minhas tags HTML. Então, como podemos criar um Classes, vamos chamá-lo de classes agora. Então, a maneira como temos um objeto e então você define suas classes. Por exemplo, para essa exibição, chamarei de contêiner de estilo ou contêiner deslizante. Então, podemos ter aqui recipiente deslizante. E este contêiner deslizante terá algumas propriedades. Nosso exatamente mencionado aqui. Então eu posso cortar tudo isso fora e depois baseá-lo aqui. Então, dessa forma, defini meus óculos. Então, tudo no centro, no centro. Então, é claro que quando você remover tudo isso, eu vou te mostrar mais tarde. Então nós temos que usar este recipiente controle deslizante classe em algum lugar aqui. Então, como podemos fazer isso, dizemos que os estilos pontuam os estilos. Qual deles? É este, que é a constante que definimos. Então, estilos. E então eu coloquei o recipiente deslizante como você vê aqui. Então estilos ponto recipiente slider, ele vai chamar esses estilos que são criados aqui. Então, quando salvarmos, veremos que tudo permanece igual. Vamos dar, por exemplo, algum espaço do topo. Por exemplo, isso apenas para um exemplo para mostrar que os estilos estão funcionando. Então, como podemos dar algum espaço, podemos usar rebatendo topo estofamento está fazendo um espaço dentro do recipiente a partir do topo, como não fora, não empurrando todo o recipiente. Se você quiser empurrar todo o contêiner, você pode usar margem. Então podemos dizer margem superior, e então você dá um valor em pixels, então podemos dizer 20. E agora, como você vê, é empurrado um pouco do topo. Então, dessa forma, temos certeza de que o nosso recipiente está usando esta classe ou esta folha de estilo. Podemos dizer, se você se lembrar que temos como alguma altura deste controle deslizante, ele estava levando quase metade da tela ou três quartos da tela. Então precisamos dar uma altura para os livros deslizantes. Então, quando voltarmos para a documentação do controle deslizante, veremos várias propriedades. Por exemplo, podemos dizer as imagens que usamos anteriormente propriedades. Quero dizer, eles são adereços que eu posso passar para este componente, por exemplo, eu posso passar imagens, eu posso passar outras opções que podem me ajudar a estilizá-lo ou fazer algo com ele. Por exemplo, desabilite ao pressionar. É como se estivesse presente, então o peito de imagem desprotegido será desativado. Por exemplo, caixa Slider ocultar este que precisamos. Será por pixel. Ele vai dar uma altura para o controle deslizante e também comprou para ele cor ponto porque há alguns ponto autoplay. Isto é bom. Vamos usá-lo. Podemos dizer auto-play como ele vai deslizar automaticamente sempre que você abrir o aplicativo. Então podemos definir esta propriedade também. Depois das imagens eu fiz espaço. E então eu digo auto-play. E então eu abro um objeto e o defino como verdadeiro. Então é booleano, está tomando valores bola. Então verdadeiro ou falso, o padrão é falso. Há também, ciclo, loop, ciclo ciclo. Quer dizer, como podemos dizer, um loop infinito. Então o usuário, quando ele desliza e quando obtemos as imagens mais recentes, ele voltaria para a primeira imagem quando ele ainda está deslizando ou deslizando. Então nós também podemos encaixar este como verdadeiro. Então podemos ir para o código da mesma maneira. Colocamos espaço e então abrimos um objeto e dentro dele, dissemos em regra, vamos salvar isso. Vamos ver se a nossa aplicação ainda está bem. - Legal. Então, se eu for agora para as imagens de casa, como de alguma forma. Eu continuo deslizando. Voltarei à primeira imagem novamente. Então, se eu continuar deslizando agora, eu vou fazer você ver a primeira imagem novamente. Então estamos deslizando em um loop. Então, bem como eu disse, vamos usar a altura da caixa deslizante. Então, podemos usar também esta propriedade e nós configurá-lo para inteiro para um número. E este número irá implementar para mim a altura deste controle deslizante em pixels. Então podemos definir, então dizemos aqui espaço. E então colocamos a propriedade que queríamos colocar. Então, teremos altura deslizante e, em seguida, damos um valor. Então eu vou colocar aqui igual, e então podemos colocar um valor, por exemplo, 600. Podemos esquecer, digamos como aqui, 600, será em pixel. E como você vê, eu tenho aqui, assim mais leve, maior. Mas temos um problema aqui. E quanto aos formulários pequenos? Porque quando eu colocar aqui para a altura estática, então talvez em pequenas formas, este controle deslizante será maior do que o tamanho da fonte. E então eu vou ter como metade da imagem atraente, o que não é bom. Então, é melhor obter a altura deste telefone ou de qualquer forma onde meu aplicativo está sendo executado? E então calcule isso. Então podemos dizer 1, 0,5. Então, o que podemos dizer, por exemplo, use três quartos da tela para o controle deslizante. Então, como podemos fazer isso em React Native está me fornecendo as dimensões do telefone que estou usando. Então, como podemos fazer isso? Podemos importar algo de React Native, que é chamado de dimensões. E essas dimensões, ele contém duas propriedades, largura e altura e largura e altura me dará a altura do telefone e a largura dele. Então, para provar isso, quero mostrar a vocês, podemos definir uma constante. Podemos chamar isso de dimensão ou fim de semana, definir essa constante em algum lugar. Então eu digo aqui const. E, em seguida, dimensões, podemos dizer diamantes russos. E esta dimensão irá conter também uma propriedade que é chamada get. E este Get, ele tem uma propriedade que é chamada tela. E então dizemos tela git. E dessa forma, eu vou ter a dimensão desta tela. Então vamos salvar isso e nós podemos console log esta propriedade. Podemos console registrar a dimensão para ver no console quais são a dimensão que eu tenho? Então, podemos ir para, por exemplo, início da minha candidatura e podemos fazê-lo aqui. Então, podemos dizer em casa, faça no início console.log, console.log. E então eu vou colocar aqui dimensões que eu defini aqui. Então, quando salvamos, abrimos novamente aquele terminal para ver o que temos no registro. Como você vê, temos aqui Font Scale. Eu tenho que torná-lo maior só para fazê-lo mostrar. Então temos aqui agora Fonte, Escala, Altura e também escala e também larguras. Então eu preciso da altura, para que possamos obter a altura da propriedade e usá-la para medir nosso controle deslizante. Então, como vamos fazer isso tão facilmente? Podemos dizer aqui dimensões altura ponto. Então, nesse caso, eu posso usar essa variável de dimensão. Então, quando vamos para os livros deslizantes esconder, eu vou dizer altura de ponto de dimensão, como você vê aqui no auto-completar e, em seguida, dividido por 1.5, é como um três quartos desta tela. Então, quando eu colocá-lo, por exemplo, um, levaria tela cheia como você vê aqui. Mas precisamos apenas do 1.5. Então vamos pegar este. E como você vê o que eu coloquei na íntegra, há no final, no fundo alguns pontos. Então precisamos remover todos os pontos, porque vamos colocar outros recipientes sob nosso controle deslizante. Sliders. Então, para remover isso também, podemos ir para as propriedades do nosso controle deslizante de imagem, e vamos ver uma propriedade que é chamado estilo ponto. Dot é dy. Então nós podemos dar um estilo para esses pontos como altura ou o raio e etc. Eu vou fazer esta altura desses pontos zeros para que ele possa ser 0, ele não pode ser visto mais. Então temos que dizer aqui, estilo ponto será Hide e, em seguida, 0. Então, como você vê aqui, é Eastland está reclamando novamente que nenhum estilo inline. Então não podemos dar um estilo para esta caixa mais leve. Por exemplo, eu posso dizer estilos ponto. Podemos dar-lhe estilo slider. Podemos dizer apenas em tudo. E este estilo de controle deslizante, vamos defini-lo dentro, aqui, dentro de nossos estilos e estilo, seu estilo terá objeto e esse objeto terá uma altura, e essa altura será 0. Então, dessa forma, não seremos capazes de ver esses pontos. Mas temos um erro aqui porque aqui eu tenho colchetes extras. Vamos removê-los totalmente. Então é o suficiente assim. Agora temos altura total e esses pontos desapareceram. Então, dessa forma, nós removemos os pontos. Então vamos colocar de volta a altura para ser 1,5. E então teremos mais silencioso da tela. E você vê agora nós temos o estilo do controle deslizante. 28. Trabalho com listas de filmes: Ok, nesta palestra, vamos ver como continuar com a nossa página inicial e começar com os carrosséis. carrosséis, quero dizer, Aquelescarrosséis, quero dizer, com os componentes que vamos ver aqui, que podemos deslizar entre nossos múltiplos filmes. Como se tivéssemos categorias de filmes como popular, popular programa de TV e família e documentários. Então, podemos muito bem ter um controle deslizante aqui para que possamos ver os últimos filmes populares. Então, dessa forma, terminamos o controle deslizante, que estava no topo aqui. E vamos trabalhar com este que é filmes populares. Então vamos começar simples e vamos estilizá-lo e ter a maneira certa de criar componentes e como podemos também trabalhar com essas listas. Então, antes de tudo, vamos trabalhar com uma lista ou carrossel muito simples. Então, como podemos colocá-lo aqui em nossa aplicação como você vê sob o controle deslizante. Então podemos trabalhar nisso com o uso de um componente que é chamado de uma lista plana. Se você se lembra, Eu lhe disse em React Native, ele também tem na documentação alguns componentes. Então, podemos ir para o botão componentes aqui. E vamos ver que há um monte de componentes que podem ser úteis e úteis para suas aplicações em React Native. Um desses componentes é uma lista simples. E com uma lista simples, você pode criar lista de componentes ou lista de decks, ou lista de qualquer coisa em Reagir nativo. E você pode fazer Cardozo com ele. Então, o uso aqui, então deixe-me diminuir um pouco. Então você vê aqui que temos uma lista e esta lista, por exemplo, agora é vertical. Vamos ver como podemos torná-lo horizontal. Tem muitas propriedades. Este componente, você precisa ler todos eles. Nós vamos usar. O que precisamos para criar nosso carrossel para os amorfos? Então, o exemplo mais simples que podemos usar é este, o começo. Portanto, não podemos dizer ou criar uma exibição. E esta visão irá conter para mim o nome ou a lista que vamos chamar de uma lista simples aqui. Então a última lista estará dentro de alguns de vocês. Então vamos criar outra visão em nosso código. Então, podemos ir aqui para Visual Studio Code e, em seguida, vamos criar outra vista. Então, digamos que seria o mesmo. Podemos dar como este. E podemos dizer aqui, não recipiente deslizante, podemos dizer célula de corte. E esta célula terá as mesmas propriedades destes contentores mais leves. Então podemos ir aqui, definir carrossel e carrossel, teremos as mesmas propriedades. Então vamos copiá-los e salvar tudo. Como você vê aqui, estamos recebendo um erro. Então este erro, eu queria mencionar que não podemos colocar dois componentes no mesmo nível em seu retorno porque isso não está funcionando como React Native, você deve colocá-los em um componente recipiente. Você pode colocá-los, por exemplo, em outra visão. E esses pontos de vista estarão dentro da má entrevista. Mas para isso, será um pouco complicado. Então Reagir nativo fornecido com algo chamado React dot fragment. E este fragmento de ponto React, É como um recipiente div, mas não é renderizado no aplicativo. Então você não pode ver, quando você está inspecionando no aplicativo, você não verá nada relacionado a esse fragmento. Então, por causa disso, como você vê, nosso controle deslizante ficou menor. Então você precisa torná-lo um pouco maior, como veremos mais tarde e como vamos estilizá-lo e fazer alguma refatoração. Então, primeiro de tudo, agora eu sou capaz de ter duas visões em um componente ou em um fragmento. Então, dessa forma, eu também posso ter minha lista plana aqui. Então vamos ligar para a nossa lista plana da importação. Então eu vou para Reagir importações nativas e eu vou pedir lista plana. É do React Native, como você vê aqui. Então vamos até aqui e dizemos que queremos ter uma lista fixa chamada aqui. E vamos passar as propriedades que veremos na documentação. Então, como você vê aqui neste exemplo, temos um item de dados e renderizar e extrator. Então primeiro vamos ver o que são dados. Os dados serão, por exemplo, os nossos filmes. Então podemos dizer a lista de filmes populares. Vamos pegar a lista de filmes populares primeiro. Então nós vamos aqui e novamente, nós já definimos filmes populares anteriormente. Podemos chamar também um estado constante. Podemos defini-lo como filmes populares. Então podemos dizer aqui, não filmes, imagens, mas podemos dizer filmes populares. E nestes filmes populares também precisamos configurá-lo. Então, dessa forma, teremos nossos filmes populares, mas filmes populares virão de obter filmes populares serviço como vimos anteriormente. Então eu diria ano set filmes populares com filmes. Assim, o retorno mais visto deste serviço será retornado no set nossos filmes populares aqui. Então, os dados desta lista plana. Como você vê aqui que precisamos definir dados serão nossos filmes populares. Então vamos ver outras propriedades. A propriedade é chamada de item de renderização. Então precisamos ter um item de renderização. Precisamos dividir exibir o item, o filme em si, como você vê aqui, temos aqui vários filmes e estamos exibindo item, item, item. Cada item é um filme para mim. Agora vamos começar apenas com o nome do filme. Como ele vai ter um texto para não torná-lo muito complicado, nós vamos ter passo a passo para crescer no aplicativo. Então, vamos usar o item de renderização como um item de renderização. E o que é renderizar item aqui? É uma função Voltar item, e o item será usado como um componente, ou ele definiu seu próprio componente aqui, que é chamado item. E será definido em algum lugar no aplicativo, por exemplo aqui. E tem uma vista e está ao lado do texto. Estou a mostrar-te um SEMP. Vou mostrar-te a maneira mais simples. Então temos que ir primeiro para renderizar item. Então renderizar item terá uma chamada de volta como este. Então vamos novamente para o nosso código e vamos ver como podemos criar um item de renderização. Então renderizar item, será, como eu disse, um retorno de chamada que é chamado item. Mas este item estará dentro de um objeto como você vê aqui. Então temos aqui item como um objeto, este item irá apresentar para mim cada filme que é retornado a partir desses dados. Então, dessa forma, eu posso colocar isso em um objeto e, em seguida, a chamada de volta desta função será retornar para mim um componente de componentes nativos React que eu posso criar sozinho ou usar um de seus componentes prontos que temos em Reagir nativo. Agora vou usar o texto. Então podemos dizer que o componente de texto, que já tínhamos visto antes. E eu vou dizer que dentro deste componente de texto colocar para mim item. E este item será assim. Temos objeto, título do ponto do item. Por que título? Porque os filmes são devolvidos para mim aqui com um título. Se você se lembra no Carteiro, temos todos os filmes, como os filmes populares. Então, o filme popular, todos os filmes lá são todos 310 com um título ou outras propriedades. Então, vamos tomar agora, por exemplo, esse título. Então eu vou dizer aqui renderizar item será o título do ponto do item. Então vamos salvar aqui como veremos o que vai acontecer. Então eu vou salvar isso e eu vou devolver o nome do filme ou o título do filme. Então vamos ver o nosso simulador. O que há lá? Está bem, Legal. Tenho menos lista de nomes de filmes. E uma das propriedades que são definidas neste componente, que é chamado horizontal. Então, se você rolar ou ler a documentação, eu não vou fazer todas as propriedades. Você só vê o que você precisa e então você pode usá-lo. O que eu preciso agora é de algo chamado Horizontal. Horizontal deve ser definido como true. Então, nesse caso, eu posso usar esses itens como listas, lista plana como horizontal, como vemos em nossa aplicação, algo assim. Horizontalmente, não precisamos de uma vertical. Então, desta forma, vou dizer horizontal igual a verdadeiro. E depois salvamos, voltamos para o simulador novamente. E veremos que temos a lista aqui. Mas é muito pequeno e pequeno porque contém apenas os nomes dos filmes. Agora somos capazes de obter o filme, por isso é muito bom. Então o que precisamos aqui para criar um componente, que é como um componente fará para mim como um cartão. Então este guarda, podemos dizer o cartão do filme, podemos dizer aqui. Então este aqui, é o guarda. Então eles vão implementar para mim como um componente. Então eu estou mostrando a vocês na próxima palestra como criar seu próprio componente em Reagir nativo para renderizá-lo aqui e não usando os componentes prontos. 29. Crie um componente de lista: Ok, nesta palestra vamos avançar para um passo maior. Então eu vou mostrar a vocês como trabalhar dinamicamente com o React. Então agora em React Native, quando você está indo para criar um componente que irá conter várias coisas repetíveis, como nós temos um componente e vamos usá-lo várias vezes. Então para isso, por exemplo, eu posso dizer que esta lista plana irá conter um título e também alguns, outro componente que será exatamente como lista plana. E então nós vamos exibi-lo como eu mostrei a vocês na demo, nós temos um título e, em seguida, uma lista de filmes documentais. Outro título que é segurar filmes populares e filmes menos populares sob ele. Portanto, precisamos de propriedades para esse componente, título e o conteúdo desse componente. Até agora que eu vou criar uma pasta que pode ser chamada de componentes. Só vamos manter os componentes com os quais vamos trabalhar. Então componente. E dentro deste componente, vamos colocar um arquivo que será chamado menos NodeJS, porque eu quero ter uma lista de filmes e esta lista de filmes tem um título. Então, e então, nesse caso, na minha página inicial, eu posso dizer que eu quero este componente lista várias vezes. Então, aqui em vez disso, vamos ter pelo menos quatro filmes populares, menos para documentário, pelo menos quatro, por exemplo, os filmes de família, etc. Então, para criar componente, como você vê aqui, eu tenho um componente e eu mostrei anteriormente os atalhos, trechos para React Native. Estamos usando a extensão que eu lhe disse antes. Para essa extensão, se formos novamente para Reagir camas de sono nativo, que temos baixado aqui. E você vai ver como vários atalhos que falamos anteriormente sobre Reagir componentes puros ou, por exemplo, componentes sem estado e com retorno. Então nós usamos este, mas agora aqui neste caso vamos usar tipo diferente, que é chamado de componente puro. E este componente, vamos usá-lo como um componente, bem como para importá-lo em nossa aplicação. É o mesmo que este, mas de forma diferente. Então, neste curso, estou mostrando várias coisas para generalizar ou como cobrir todos os tópicos sobre React Native. Então vamos aqui e dizer que eu quero, por exemplo, o atalho, que irá segurar para mim uma classe de componente pura. Então eu vou aqui e digo B, C, sua classe componente. E então eu vou ter este componente. E como eu disse antes, queremos o componente que tem entradas ou adereços. E esses adereços, podemos criá-los de uma maneira como a seguinte. Então você não precisa deste estágio 4 agora não vamos usá-lo, mas dentro da rendição e Rick, antes do retorno, podemos definir uma constante. E nesta constante, podemos definir um adereços. E esses adereços, como podemos defini-los, por exemplo, eu preciso de um título. Vou renderizar um título dentro deste componente. E também, eu quero ter um conteúdo, e o conteúdo será a lista de filmes. E esta constante que você tem que colocar como este ponto adereços e esses prompts com vêm de React Native. Mas neste caso você não vê nenhum autocomplete aqui porque você precisa importar um componente puro que é estender para que componente puro é uma classe que é usado no React Native. Você pode importá-lo do React. Então, para isso, precisamos importar React também. Então exatamente como temos aqui nos trechos, você pode dizer que eu sou importar Reagir. Então temos aqui, eu estou. E então você vai começar reagir e estes componentes, ele vai se estender de componente puro que vem de reagir. Então, dessa forma, você terá a importação certa aqui. Então, depois disso, este ponto adereça, vamos ser definidos. Claro, porque este ponto adereços está vindo com o componente puro, como este é o que nós estendemos a partir dos componentes puros. Por isso, estendemos também as suas propriedades. E uma dessas propriedades ou variáveis é adereços. Então vamos tentar agora o nosso componente. Então, por exemplo, eu quero renderizar uma exibição, visão normal. Então, podemos dizer que aqui tem você. Então precisamos importá-lo aqui também. Então eu vou dizer aqui Import view de React Native. E digamos que vamos colocar apenas o componente, ou, por exemplo, o título. Então podemos dizer aqui, podemos importar também o componente de texto. Então este componente de texto virá também de React Native. Então eu tenho ousado aqui. E, em seguida, este texto irá conter apenas, como, algum texto aleatório. Ele irá manter esse título, esse título que é goma como uma propriedade para este componente. Então vamos guardar isso. E então vamos usar esse componente, como podemos usá-lo ou como podemos chamá-lo. Então eu estou indo aqui para criar outra visão sob esta aqui, sob a lista plana. Então o dipolo deve aparecer aqui embaixo. Então, temos outra visão. E essa visão dentro dele, vou chamar meu componente, qual componente eu chamei de lista. E essa lista vem de onde? A partir deste componente. Então, nesse caso, eu preciso importar este componente. Também aqui. Então eu tenho que dizer aqui Importar e, em seguida, lista de. E então eu tenho que dizer como componentes duplos e, em seguida, lista. Então, aqui eu importei o componente certo da pasta de componentes. Então vamos de novo aqui. E como eu lhe disse, há adereços. Como podemos usar adereços exatamente após o nome do componente. Você pode dizer os adereços que você quer. Então, o que eu quero aqui, eu tenho dois avisos. Um é diagonal, outro é conteúdo. Nós só daríamos o título de exemplo. Então eu vou aqui e eu digo título, e então eu vou passar como qualquer texto codificado, Digamos, por exemplo, meu componente menos, Python. Então, só assim, porque vamos vê-lo aqui. Então, quando eu salvar, eu tenho um adulto. Por que com este tipo de elemento é inválido esperado uma string para componentes de construção. Sempre, eu cometi este erro por propósito, apenas para mostrar que como é a diferença entre os componentes agudos e que os componentes de função. Então componente de função, algo como isso como você vê aqui. Mas um componente puro, você precisa chamá-los sem todos esses colchetes exatamente como estamos chamando reagir. Então, quando você quer chamar um componente puro, você tem que importá-lo assim ou para componente de classe. E então, sem todos esses suportes, funcionaria bem. Então agora vamos salvar novamente. E vamos notar que não vimos nada porque precisamos colocar um estilo para essa visão. E vamos, por exemplo, copiar desta vez para um show rápido e salvar novamente. E como você vê aqui, eu tenho no meu título, meu título componente lista. Então, dessa forma, eu sou capaz de usar componente z. Então, quando eu vou aqui e digo, por exemplo, adicione para mim uma string. Podemos dizer título e algum número, 2 para 2, por exemplo. E como você vê isso, veio aquele componente com a entrada que eu especifiquei na casa. Então eu disse título tem uma entrada, meu componente lista, título e dentro do componente lista, eu adicionei a esta coisa. Então, nesse caso, eu também vejo. Assim, desta forma, você pode criar um componentes dinâmicos. Então, para isso, eu vou mover esta lista, que temos aqui na página inicial para esse componente. Então vamos fazer isso rápido. Primeiro de tudo, vamos ter toda essa parte. Então temos aqui como não mais a vista, teremos apenas a lista. Então eu tenho aquela lista plana. Então, quando voltarmos aqui para a lista, eu removerei este texto. Vou colocar aqui que eu tenho a lista plana, mas pelo menos precisamos chamá-lo novamente como um componente. Então, a partir daqui, precisamos copiar sempre todos os componentes importantes nos componentes de destino. Então nós podemos ter aqui também dimensões mergulho fraude porque vamos precisar deles mais tarde. Então vamos remover este importante para ter o aplicativo. Todos eles são importados do React Native. E aqui, como você vê aqui, precisamos de dados. E esses dados, eles não virão do título. Eles irão com o conteúdo, esse conteúdo adequadamente. Então esta propriedade de conteúdo dessa forma, eu preciso especificá-lo também no componente lista aqui. Então eu vou ter, além do título, eu preciso dizer conteúdo. E também como alguma propriedade, que será, por exemplo, meus filmes populares. Então eu vou colocá-lo aqui também. Então, nesse caso, você terá certeza de que você tem as propriedades certas são passadas para esse componente lista. Então, novamente, vamos remover essa lista porque não precisamos mais dela. E agora que temos aqui a vista, não precisamos dela também. Então temos aqui para guia de estilo ou célula. Então nós salvamos aqui, e também nós salvamos aqui, ok, nós ainda estamos recebendo alguns erros porque o filme popular variável não foi encontrado aqui. Então, em vez de filmes populares, porque eu te disse isso, filmes populares, passamos por esta propriedade. Então eu disse, o conteúdo vai ser filmes populares que eu tenho do backend e eu passá-lo para a lista. Então, no componente lista, temos que usar esse conteúdo em íngreme. Então vamos salvar. Certo, agora temos essa lista. Então, como uma recapitulação, rapidamente, definimos um novo componente que é chamado lista. E este componente de lista terá para mim um título e um conteúdo. E dentro deste modelo de auditoria disso, será um título mais plano e também algum. Então talvez você tenha outra vista como esta. Para que possamos ter uma visão para o título. Então, eu também terei uma vista aqui. E como eu disse, você não pode ter outra visão como recipiente porque você não pode colocar dois componentes do mesmo nível diretamente no retorno, você precisa contê-los todos em um recipiente. Por exemplo, aqui eu usei. Reage fragmento como você se lembra, mas aqui vamos dizer que podemos usar a vista também. Então, ver que contêm várias visualizações. E também preciso de outra visão para esse item. Então, neste caso, nós vamos ter você e pontos de vista dentro como você vê aqui. E dentro desta visão, vou especificar um texto, e este texto irá conter para mim o título. Então aqui eu também tenho a luta. Assim, o título que viria do componente homepage e que eu especifico aqui no prop. Vamos guardar isso. E como você vê, o título é mostrado, mas está sob o Cardozo porque precisamos estilizar todas essas coisas aqui. Então vamos criar como vamos ouvir, uma folha de estilo. Então eu vou querer a mesma coisa. Podemos ter aqui, uma constante. Lembre-se do Stein. E isso é marés vai segurar folha de estilo e, em seguida, Criar. E então podemos abrir e colocar nossas aulas aqui. Então, a primeira classe que eu preciso ter aqui como estilo para o texto, dizer que ele morreu. E então ele virá do texto ponto de Stein, por exemplo, nós vamos definir esta classe. Então eu vou voltar aqui para as minhas aulas. Direi o achado para mim, o vidro de texto. E dentro deste objeto de texto terá tamanho da fonte. Por exemplo, colocamos 20 e 20. Seria como um pixel. E podemos colocar também font-weight. É exatamente como CSS, mas como você vê, nós não temos peso de fonte normalmente em CSS, você escreve assim. Mas aqui, não, porque estamos usando objetos, objetos javascript, então será como CamelCase. Então podemos ter aqui o peso da fonte e este peso da fonte, vamos ser uma string, e esta string será negrito. Então, dessa forma, é algo como CSS, mas você está alterando-o para sintaxe JavaScript de alguma forma. E a cor, talvez possamos colocar alguma cor que será preta ou qualquer coisa. Então, dessa forma, você pode colocar cor. E você pode dizer aqui preenchimento inferior, gostaria de empurrar o texto sob ele ou a lista sob ele. Alguns pixels. Então podemos dizer aqui às 20. Assim, como você vê, como se fosse mostrado aqui em cima. Então, a visão em si precisa ser empurrada do topo. Então, para essa visão, podemos definir como Will Stein e este estilo de vidro que temos contido. Podemos dizer Styles e, em seguida, podemos chamá-lo menos para ver em, por exemplo, sim, apenas lista. Podemos dizer assim. Então podemos dizer lista. E a lista terá outra aula. Então não podemos dizer lista. E podemos dar-lhe como rebatidas top ou margem superior, por exemplo, eu diria. E esta margem superior gosta de empurrar a lista do topo cerca de 25 pixels dessa forma. E aqui nós, esqueci-me da vírgula. E então, como você vê, nós temos o título no caminho certo para esta lista. Na próxima palestra, vamos fazer mais styling e também, vamos mostrar as imagens dos filmes como vimos na demonstração. 30. Crie um componente para cartão: Ok, nesta palestra vamos ver como podemos estilizar e fazer mais bonito esta lista. Então você se lembra que estávamos apenas exibindo o título. Que tal exibir algumas imagens? Então vamos fazer isso de uma forma que vemos como as imagens deles sempre. Então, primeiro de tudo, se você se lembra, nós sabíamos como criar componentes. Então criamos um componente de lista. E este componente lista, ele contém lista plana, e esta lista está renderizando um texto somente. Então, que tal, em vez disso, renderizarmos um componente de cartão, um deus que eu vou criar agora e torná-lo clicável. Então, quando você clicar em um dos filmes, ele vai nos levar, como vemos mais tarde na navegação que ele iria navegar para nós para os detalhes desse filme. Então, em vez de que pode ser, eu vou passar o item para um componente que seria chamado cartão. Então vamos criar um novo componente e vamos chamá-lo de cartão de ponto js. E este cão de guarda JS, eu também usaria esse estilo componente puro. E dessa forma eu posso usar tão bem como exatamente como fizemos com os componentes da lista. Eu importaria aqui os três atos e também os componentes React ponto view. Quais são as propriedades deste componente? Podemos definir uma constante e damos-lhe um nome como item. E o item será como o filme, que vamos exibir naquele jardim. Então, vamos dizer que este ponto adereços. Então, dessa forma, eu defini uma constante que é chamado item. E este item seria uma propriedade para esse componente. E, claro, isso deve estar dentro da renderização e antes do retorno. E vamos precisar fazer este guarda como um clicável. Então, como podemos fazer isso? Se você se lembra, em React Native, existem vários componentes que podemos usar. Um desses componentes chamado opacidade tocável. E a opacidade tocável está lhe dando a habilidade quando você clica em algum botão ou algum componente ou algum item, se fizermos como alguma opacidade como sombreado. E ele vai responder para os cliques do usuário e será exibido como um considerado, como você vê aqui. Então, dessa forma, vamos usar esse componente também. Então precisamos importar um componente de opacidade tocável. Então precisamos dizer importe opacidade tocável de React Native. E dessa forma eu tenho a opacidade tocável e eu posso chamá-lo como um componente, o retorno aqui. Assim, uma opacidade tocável terá também outras propriedades, como veremos mais tarde, e daríamos a eles alguns estilos. Então vamos preparar nosso arquivo de estilo. Podemos dizer estilo. E este mostrador seria como a partir desta maré. Então precisamos também constante, que chamou estilos. E criará uma folha de estilo aqui. Além disso, precisamos importar esta folha de tempo. E esta folha de estilo não teria um Create. E nós vamos criar nossas aulas aqui. Então vamos chamar esse estilo de opacidade tocável como, por exemplo, damos o nome e chamamos de contêiner, por exemplo. E aqui eu vou para o estilo e eu vou dizer que eu tenho um recipiente e este recipiente terá o objeto e as seguintes propriedades. Podemos dar algumas rebatidas em geral, algo como podemos dizer cinco pixels. E também podemos dizer como precisamos de uma posição parentes. Eu digo-te porquê mais tarde. Então, dessa forma, estamos preparando este componente para ter alguns estilos. Então temos aqui o estilo será estilos aqui e opacidade tocável. Então vamos salvar esse componente em geral, e eu vou importá-lo na minha lista. Então, em vez de texto, eu usaria guarda. E este guarda tem uma propriedade que se chama item. E eu vou passar o que o item que está retornando da lista de filmes como você se lembra. Então nós temos aqui esse item, que é o chefe do cartão deles. E este cartão, vamos fechá-lo. E então você não precisa usar tudo isso, então podemos usar que um lado fechando tags. Então precisamos importar esse item de carrinho. Então vamos aqui e eu preciso fazer proteção de vidro de importação de componentes, que será neste mesmo nível da pasta da lista. Então seria assim. Então nós temos DEUS, a partir do arquivo de cartão porque eles estão no mesmo nível do arquivo. Então salvamos e temos aqui nosso componente, item ou título, mas não temos nada aqui porque está vazio. Então, vamos até aquele cartão, precisamos colocar dentro dessa opacidade tocável, algo assim. Agora funciona como uma opacidade tocável, mas está vazia. Vamos colocar também outro componente que é chamado imagem. Vou colocar essa imagem do filme dentro deste componente. Então, como você vê aqui, ele também tem estilo. Você também precisa importá-lo. De React Native e, em seguida, você pode usá-lo. E tem duas propriedades. Um deles morreu e depois a fonte. A fonte seria a fonte da imagem que você deseja usar dentro desse componente. Então eu vou importar a imagem também de Reagir nativo. Vou colocar aqui imagem. Então eu vou colocar aqui esse componente de imagem. E a imagem do componente tem alguma propriedade. E será também um componente lateral, então não temos nada dentro dele, então você tem que usá-lo assim. Então, primeiro precisamos que isto morreu para aquele componente ou para aquela imagem. Então usaríamos também os estilos. Então eu diria estilos. Imagem, por exemplo, ou imagem de filme depende de você. E depois disso podemos definir que morreu aqui. Então eu vou aqui e eu diria estilo, e nós precisamos da fonte como vimos na documentação. Então, qual será a fonte? A fonte, se você se lembra que estamos recebendo o item para esse componente de modo que o conteúdo deste filmes populares foram escritos para mim matriz de filmes. E essas matrizes de filmes são usadas na lista plana. E a lista plana os tornaria item por item, filme por filme. E passo todos os filmes para esse cartão. Então todo ano de cinema é passado para este cartão. Para que eu possa usar as propriedades dos filmes. Então eu me lembro que a propriedade que vamos usar para obter a imagem será que se vangloriar ou imagem. Então eu posso colocar aqui item que reforçar o caminho. Então, como você se lembra, nós temos aqui recompensato postar seu chefe do filme, que nós usamos antes. Mas vamos ler a documentação com mais cuidado. Eu vou salvar aqui, temos aqui campo e é chamado como ele está nos dando um erro, essa propriedade inválida. Por quê? Porque ano, quando você deseja usar essa propriedade e você deseja a exibição da imagem de origem a partir do URL, você precisará usar este objeto que é chamado URI, não pode colocar essa fonte da imagem ou, por exemplo, o caminho da imagem diretamente. Neste curso, você precisará usar uma propriedade chamada URI. Então, para isso, eu não sou suficiente para usar apenas o item. Precisamos colocar outro objeto lá dentro. E dentro deste objeto temos uma propriedade que é chamada URI, assim. E então, tudo bem, a imagem não me daria nenhum erro. Mas não estamos vendo nenhuma imagem. Negócio agora. Por quê? Porque se você se lembrar, precisamos prefixar a imagem com um pouco de banho, como fizemos com este Finder. E nós criamos a matriz de imagens. E essa matriz de imagens é prefixada assim. Então, precisamos usar também todas as imagens para ter prefixo URL como este. Então vamos copiar esta parte também. E vá para a nossa guarda. E eu vou dizer que u é o URI, esta string mais o pôster do item ponto. Então, quando salvarmos, veremos que ainda não vemos nada porque não demos uma classe para a imagem até agora que precisamos ir para os estilos e dar um estilo, um novo nome de estilo, que é chamado imagem como definimos aqui. E eu vou dar uma altura para esta imagem, digamos 200. E também podemos dar, por exemplo, trigo, que será 20 ou 120 fim de semana dizer. E podemos ver tão bom quanto você vê, já temos essa lista das imagens, mas também precisamos dar como um raio de fronteira. Eu só estou mostrando aqui como algumas habilidades CSS. Você pode fazer tudo como quiser com base no que você precisa para o seu design. Então eu estou indo aqui para dar limite de raio 20. E nós temos aqui nossa lista, e nós temos nossos componentes ou filmes. E quando você clica neles, como você vê, é exatamente como esperado de nossa aplicação. Às vezes, se a imagem do filme é muito pequena, talvez fosse cortada assim. Mas como estamos usando a mesma API, temos imagens confiáveis. Então, desta forma, é melhor usar alguma propriedade que é chamado de tampa de modo de re-size e este molde de redimensionar cobri-lo. Cobrimos o recipiente dessa imagem exatamente na mesma altura e largura que acabamos de especificar aqui. Então esse tamanho da imagem original não importa. Ele vai caber exatamente nesta largura e altura. Então, quando você salvar, você terá a mesma largura e altura, exatamente como você especificou aqui, mesmo a imagem é menor. Então, quando queremos usar várias listas, podemos simplesmente ir para a casa e duplicar todas essas visualizações. Então eu quero ter outra vista aqui. Então eu vou conseguir outros filmes, e também vou conseguir outros filmes, etc Então, dessa forma, você será capaz de descobrir sua lista de filmes populares. Claro que precisa de mais estilo, como veremos mais tarde. Mas dessa forma estamos reutilizando esse componente, mas com dados diferentes. Então, dessa forma, criamos nosso componente e vemos a lista das imagens. Então vamos aqui para a página inicial e dar para este componente um nome como ou esta lista podemos dizer filmes populares. Então não podemos colocar aqui filmes populares. E ele vai mostrar para mim os filmes populares. E mais tarde veremos como podemos listar mais e mais listas para nossos filmes. Mas vamos fazer mais etapas, como estilizar e refatorar e exibir imagens de espaço reservado para tornar este componente de cartão mais melhor e mais dinâmico. 31. de imagem no componente de cartão: Ok, uma das questões importantes que podemos enfrentar no futuro se não houver imagem exibida aqui. Então, quando não podemos receber da API qualquer imagem. Então, como podemos resolver isso? Para isso, eu usaria uma imagem de espaço reservado e imagem que é armazenada dentro do aplicativo. E quando há um erro de carregar essa imagem, então eu mostraria um suporte de lugar aqui. Então, para isso, eu quero armazenar uma imagem dentro da minha estrutura de pastas. Assim, essa pasta pode ser, por exemplo, nomeada como ativos. Então, nesses ativos, você pode colocar qualquer coisa que você precisa para o seu aplicativo. Um deles pode ser como imagens. No interior das imagens da pasta. Posso criar minhas próprias imagens e colocá-las aqui. Assim, por exemplo, eu criei uma imagem de titular de lugar para mim. Fiz bem com o Photoshop. Então, com o Photoshop, eu posso colocar essa imagem em vez da imagem do filme quando não há imagem disponível. Então, para isso, podemos usar isso também. Então, como podemos exibir essa imagem quando não há imagem disponível. Então, quando eu for aqui, vamos definir uma constante. Podemos chamar essa imagem de espaço reservado constante. Então, digamos que uma imagem de titular de lugar constante ano. Esta imagem titular lugar seria necessária a partir do banho que eu especifiquei, que será na pasta de ativos. Então, para isso, eu usaria a pasta de ativos. Eu vou ir um passo acima imagens ativos, e então eu vou especificar a imagem que eu quero. E o nome da imagem será espaço reservado que B e G. Então, nesse caso, eu terei minha imagem dentro da imagem de espaço reservado. Assim, no componente de imagem você pode especificar URI ou diretamente um arquivo. Então, quando você quer usar uma multa, você usa necessário. É por isso que usei o necessário. Assim, a fonte da imagem pode ser URL ou pode ser um arquivo. Então, para isso, preciso especificar algo dentro da fonte. Eu vou dizer item ponto caminho poster. É como eu estou fazendo aqui. E se, e então eu colocar ponto de interrogação, este ouro em linha. Se”. Então, você pode, por exemplo, colocar um if em uma linha para que após o ponto de interrogação, você colocará o ponto de valor É através. E então você coloca dois pontos, e então o valor será quando for falso. Então, neste caso aqui, será quando o caminho de reforço tem um valor, ou é definido, ou tem um conteúdo, e quando estiver indefinido, ele obterá esse valor. Então, para isso, eu usaria quando ele tem um valor, dê-me este objeto, que será você sou eu e toda a imagem do cartaz. Mas quando não tem nenhum valor, vou colocar aqui um cólon. E depois desta coluna, vou colocar imagem de espaço reservado. Então, nesse caso, depois de salvar, está formatado. Se o item, o caminho do cartaz é indefinido ou não está disponível, tudo isso é erro, ou está vazio, então ele não vai mostrar que você deve eu pegar a imagem do titular lugar. Mas quando há um valor, levará o primeiro valor, que é após o ponto de interrogação, que será quando. Certo, então como podemos testar isso? Poderíamos, assim, este lugar imagem titular de uma forma que nós viramos. Mas esta condição, então vamos colocar aqui não. Então, neste caso, quando há uma exibição de imagem de cartaz para mim, essa imagem de espaço reservado e salvar, vamos ver que temos as imagens de espaço reservado. Mas dessa forma, não sabemos qual é o nome do filme. Então, é melhor também exibir o nome do filme. Então, nós exibimos o nome do filme apenas no caso de haver apenas espaço reservado de imagem. Então podemos dizer também alguma condição aqui. Então eu vou adicionar também, como depois da imagem, eu vou ter um texto componente e este texto será exibido quando não há caminho de cartaz. Então eu vou dizer aqui e objeto após a imagem. Então nós temos aqui, como quando há item, aquele lugar titular, ou quando não há nenhum item e lugar titular, em seguida, e fazer as vezes como você se lembra, nós fizemos isso quando estávamos lidando com o erro. Então, vou colocar um componente de texto. Então chamamos um componente de texto aqui. E damos a este componente de texto um valor que será o nome do ponto do item. Então podemos ter o nome do filme, ou neste caso, temos em nossa API, É chamado item ponto-ponto. Então, quando eu salvar, tudo bem. Eu não vejo nada porque eu disse quando não há imagem de cartaz, mas no nosso caso, isso é uma imagem de cartaz. Então, apenas para teste, como eu disse, nós invertemos as condições aqui para ver o que vamos fazer com a imagem de espaço reservado. Então, como você vê, nós precisamos importar também aqui o componente de texto, então eu vou copiá-lo e ok, bom. Agora temos o nome do filme, mas é feio porque quando o nome do filme é longo, ele está empurrando os outros filmes para perto. Então, para fazer isso, ou podemos lidar com isso colocando, por exemplo, o nome do filme aqui no meio da imagem do titular do lugar. Então vamos dar a este texto algum estilo que veremos aqui. Estilo e este estilo podemos adicionar também alguns vidros que podem ser estilos. E aí dentro morre, não podemos dizer o nome do filme, por exemplo. E dentro deste nome do filme, vamos estilizar o nosso nome do filme no titular do lugar. Então vamos agora para os estilos que vou adicionar aqui e seu copo, que será o nome do filme, que temos como nomeamos aqui. Então eu vou dizer aqui que o nome do filme será um objeto. Então, a primeira propriedade para esta classe, vamos dar-lhe uma posição, absoluta. Eu digo-te porquê. E também podemos, por exemplo, apenas para ver o que está acontecendo. A posição absoluta é localizar o componente no meio ou no início do componente pai. Então, no nosso caso, nós, nosso componente pai é este recipiente, como você vê aqui, opacidade tocável. Ele tem o nosso componente pai do texto. Então, nesse caso, precisamos colocar o componente pai são relativos. Então, quando eu tenho uma posição relativa ou absoluta, então eles serão relacionados uns com os outros por parente. Porque quando eu remover este parente, então a posição deste item, às vezes ou um Android, ele estaria localizado na parte superior da tela, porque eu não vou ter uma posição eletiva para esta criança com sua patente. Então vamos colocá-lo de volta. Temos agora posição absoluta. Você tem que ter certeza de que você tem posição relativa. E agora vou dar algumas propriedades. Por exemplo, para dar-lhe alguma largura, podemos colocar o semelhante, a largura é a mesma sobre a largura da imagem, mas menos como 20. E também, podemos fazer esse texto alinhar com o centro. Então podemos ter esse texto no centro. Então é exatamente como fazemos com o CSS normalmente. E também, podemos este item localizado no meio ou colocá-lo no meio, você tem duas opções. Aqui. Você pode fazer o contêiner como itens de linha. Você pode colocá-lo de uma maneira como o centro, como você vê aqui. Ou você pode fazer, neste caso, são o próprio item. Você pode dizer alinhar auto e isso eu deixaria, o componente terá uma posição central. Então, uma dessas duas opções, eu prefiro usar nossos itens de linha, como eu quero alinhar todos os itens dentro deste recipiente no centro. Então agora precisamos empurrar o texto no topo um pouco como do topo para não estar exatamente na borda da imagem. Então você também pode colocá-lo aqui no centro. Eu quero mencionar a vocês que é muito importante colocar uma altura para o recipiente porque o nosso recipiente neste caso é este cartão. Então, dessa forma, se você ver, se você alinhar seus componentes como você pode, por exemplo, vamos tentar colocá-lo no centro aqui. A instrução para que você pode dizer justificar conteúdo será centrada. Então, quando eu salvar isso, quando eu colocar justify centro de conteúdo, como você vê, todo o conteúdo empurrado para baixo isso porque a altura deste recipiente tem o resto da vista. Então temos aqui este controle deslizante, e então temos o resto da vista é atribuído automaticamente porque o recipiente principal é um flex. Então, dessa forma, temos que ter cuidado com isso. É melhor dar altura para aquele recipiente. Então eu vou dar também a um 100 pixel. Então, nesse caso, vamos ver que o nosso item está localizado exatamente no meio e o nome do filme está localizado no meio e altura do recipiente é bem para um 100. Então, nesse caso, você tem que garantir que todos os tamanhos não tenham problemas no futuro. No meu caso, não vou colocar o centro de conteúdo justificativo, mas vou manter a altura. Mas vou empurrar um pouco esse texto aqui do topo. Então podemos dizer aqui DHAP do nome do filme, ele terá como 10 pixels, podemos dizer. Então eu vou colocar aqui, em seguida, pixel. Então, depois de salvar, vamos ver que o texto é mais bem maneira quando o filme não tem uma imagem. Então, agora, quando queremos fazer funcionar normalmente, temos que mudar suas condições novamente. Então, quando há uma imagem de cartaz ou exibição caminho reforçado para mim a imagem do que a imagem normal. Então não precisamos desse nó. E não há nenhuma exposição de banho pós-doutorado para mim, um texto onde ele vai conter o nome do filme, então não precisamos dele assim. Então dizemos que quando não há uma imagem de cartaz, então não gosto desta lâmina, desse texto. Então, guardamos isso. E então teremos o comportamento normal. Como vê aqui, tudo está funcionando bem. Não temos nenhum problema. 32. Verificação no React Native: Como seu aplicativo está crescendo, você precisa sempre pegar um monte de bugs e erros com verificação morreu. Para alguns aplicativos, você também pode usar extensões JavaScript como lei ou TypeScript para verificação de tipos. Mas há uma maneira mais fácil com o TypeScript ou JavaScript que estamos usando aqui. Então você também pode verificar a coxa de suas variáveis, todos os seus adereços. Então, quando você quer fazer um tipo de adereço, nós também podemos fazer isso aqui. Então podemos definir uma constante, podemos chamá-la de tipos de gotas. Então não podemos dizer esta const. E então tipos de adereços. E esses tipos de adereços seriam um objeto. E este objeto conterá também aquele adereço que definimos aqui. Então nós definimos aqui item, este ponto adereços. E este item aqui, não vamos atribuir apenas como um valor ou algo assim. Nós atribuiríamos uma fralda e eu estou onde posso trazer tipo. Eu não posso trazer fralda em uma biblioteca que é chamado tipo de prop, e ele já está instalado quando você instala React Native ou você vai iniciar um projeto? Então agora temos um tipo de adereço de tipos de adereços. E este protótipos que contêm todos os tipos que você precisa para seus prompts. No nosso caso aqui temos o item será um objeto. Então, podemos dizer tipo prop deste item será objeto. Ou você pode definir string. Você também pode definir, por exemplo, número. Então você pode definir qualquer tipo que você quiser. Então, aqui vou dizer que tipos de prop deste item ou este prompts será como objeto. E então isso não é suficiente você também tem para anexar esses protótipos ao componente. Então, como fazemos isso? Nós vamos para baixo quando estamos indo para exportar a classe ou o componente ou o componente puro, dizemos proteger o nome da classe em si e, em seguida, caiu tipos. Como você vê aqui. Você pode então dizer que tipos de prop, que são definidos no topo. Assim, os tipos de adereços desta guarda serão os protótipos que definimos no topo. Então, depois de salvar isso e quando você está depurando seu aplicativo ou quando você está fazendo, por exemplo, alguma atribuição para este prompts, ele lhe dará erro quando você diz que este item é S3, sabe que deve ser um objeto. Então vamos fazer o mesmo bem para o item da lista, precisamos também do componente lista que criamos anteriormente. Então precisamos também definir uma constante, tipos de lida. Temos aqui o título. Então esse título seria tipos de prop, mas morreu de string porque estamos recebendo a string do título ou para o filme. E também que o conteúdo terá objeto porque ele iria conter todas as informações sobre o filme. Então vamos colocar aqui também conteúdo e não nos esquecemos de importar tipos de adereços de tipos de rocha. Então aqui vamos colocar também os tipos de livro. E no final você tem que exportá-lo, para que você não tenha que esquecer isso. Então dizemos lista ponto adereços tipo é igual a tipos de prop como vemos aqui. Então, quando economizamos, garantimos que tudo está funcionando bem. Não temos nenhum erro no console ou algo assim. Então, agora temos nossos componentes com tipos de adereços. Nesse caso, você não terá nenhum erro quando estiver chamando esses componentes. Então eu vou te mostrar para o exame. Eu chamaria aqui um número para este título. Não vou chamar, por exemplo, um texto. Então, nós salvaríamos, você verá prop inválido, título do tipo. Então, temos aqui um erro no tempo. Então, quando você coloca este como string, então você não verá nenhum erro. Então você deve ter certeza de que o tipo está bem aqui. Caso contrário, você receberá erros. Então, quando você vê na próxima palestra, é quando eu estou definindo um componente, eu faço este protótipos é apenas para depurar e capturar um monte de bugs, talvez vem com uma digitação. Então, como você vê aqui, quando eu receber um erro, título prop inválido do tipo string fornecido para lista deve ser esperado como objeto. Isso ocorre porque, como você vê, eu defini este título como um objeto, mas ele deve ser uma string. Então, temos um ano para fazer uma agitação e guardamos isso. E vamos novamente para o console. Não recebemos nenhum erro novo. Temos apenas o erro onde temos o tipo era objeto. Então, neste caso, você pode ver também seus erros aqui. 33. Como adicionar a visualização de role ao rolar a tela caseira: Ok, nesta palestra vamos ver como podemos fazer um pergaminho para esta revisão ou para a página inicial. Por que eu vou fazer uma rolagem aqui. Porque se você ver que se eu criar outra visão, por exemplo, teremos documentos, filmes e também teremos filmes familiares. Então, nesse caso, você verá que você não será capaz de rolar. E uma visão está ficando cada vez menor. E nosso controle deslizante, Nossa visão é dividida por todos esses pontos de vista. Então, nesse caso, é melhor criar um pergaminho de você. Assim, criar uma exibição de rolagem é usando um componente do React Native, que é chamado de ScrollView. Então, podemos usar essa visão de rolagem facilmente. Você pode importá-lo do React Native como você vê aqui, e então você pode usá-lo. E para Raul você está contente com aquele ScrollView. Então eu vou cercar todos os pontos de vista que temos aqui com esse ScrollView. Então, dentro de seu fragmento de reação aqui, precisamos localizar a visão de rolagem e, em seguida, fechá-la antes do fragmento de reação da marca de fechamento. Então não voltarei aqui e fecharei. E como você vê aqui, temos agora possibilidade de rolagem no aplicativo. Assim, quando crio várias visualizações para outros filmes, como por exemplo, podemos dizer aqui várias visualizações. Então, podemos rolar nossa aplicação de forma segura e pacífica, sem problemas. E como você vê, nós cobrimos a parte de trás, os sinais do controle deslizante, que tínhamos feito antes. Então vamos colocar tudo de volta. Na próxima palestra, veremos como podemos pegar os dados de filmes populares, famílias e documentários, etc. 34. Documentários de filmes de TV: Ok, Se você se lembra, criamos vários serviços para obter TV popular, próximos filmes e filmes populares. Então vamos criar também um controle deslizante para esses serviços. E também vamos adicionar mais serviços como filmes de família e documentários. Então, vamos começar a criar um controle deslizante para a TV popular. Temos filmes populares, temos os próximos filmes recriados aqui. Agora vamos usar a TV popular. Então eu estou indo para a página inicial e então eu vou dizer bem, obter para mim a TV popular para que possamos chamar o serviço novamente da mesma forma como fizemos exatamente com os serviços anteriores. Então aqui vamos dizer ficar popular, dv é exatamente esse nome do serviço como temos aqui. E nós vamos importar dos serviços. Então você tem que lembrar que você está sempre importando esses serviços. E então nos movemos para a superfície novamente e precisamos definir algo como set TV popular. Então podemos dizer uma variável onde obteríamos TVs populares. Assim, desta forma, podemos também criar outra variável de estado que será exatamente como filmes populares, mas seria chamado de TV popular. Então fazemos com o mesmo, copiamos a mesma linha e dizemos TV popular. E aqui dizemos definir TV popular. E da mesma forma, vamos usar a variável que é chamada de TV popular para encaminhá-lo para a lista. Então vamos duplicar essa visão. E então vamos adicionar aqui, filmes não populares, mas podemos dizer programas de TV populares, por exemplo. E então o conteúdo será popular TV valioso, que criamos no topo. E agora teremos aquela TV popular. Aqui. Você vê isso? Sim, o chumbo está reclamando que os componentes vazios estão fechando automaticamente. Então, é melhor não ter fechamento assim. Queria mencionar isso antes, mas não tive essa chance. Então você só teria aqui para colocar como esta tag de fechamento é ação de todo o componente DAG que é como uma porta, torná-lo um lado etiqueta de fechamento. Então, dessa forma que ele tem comprimento seria feliz. Então, vamos salvar. E depois vamos para aqui. Temos aqueles programas de TV populares. Então o que temos agora, filmes populares, programas de TV populares, vamos ter documentários e família. Então, da mesma forma que vamos aos seus serviços e então eu vou ter um novo serviço que será chamado obter família ou obter filmes familiares ou documentários. Vamos começar com bons filmes de família. Então aqui, em vez de comprar filmes futuros, podemos dizer “Obter filmes de família”. E para muitos filmes, precisamos verificar a API para isso. Então você precisa ir para o site da API do banco de dados de filmes e, em seguida, você precisa verificar como obter os filmes ou a família. Então colocaríamos filmes e veremos que temos muitos recursos. E vamos torná-lo um pouco maior. E você vai ver que nós não temos algo como filmes especiais de família como nós não temos as categorias. Desse modo. Eu prefiro que você leia mais a documentação para obter o que você quer. Então, depois de ler a documentação, descobri que há algo chamado Discover. E dentro desta capa há mais que descobrimos e descobrimos TV e cujo filme descobre. Você pode usar esta API como este filme de barra de capa para obter mais deles com base em algum filtro. É como filtrar os filmes com base em algo, por exemplo, por região, por, procurado por, e também certificações de pórtico incluem adultos, incluem vídeo, todas essas informações. Você pode obtê-los quando quiser fatorar o filme. Então eu quero filtrar por, por exemplo, Jenna , Jenna, por exemplo, o tipo deles será categoria org do filme. E então precisamos passar a identidade da Genebra onde queremos ver os filmes de família. E então vamos obter o filme de família até agora que precisamos também listar o generoso antes de usar esta API. Mas vamos primeiro colocar um urso em que API para isso. Então agora eu vou usar este banho da API em meu serviço é Paul. Então aqui vamos ter o URL API, o original, e então eu vou passar aqui a coisa que é chamado Discover e depois filme. Então, nesse caso, depois disso, passamos a API também. E aqui vamos ter esse filtro Jenner. Então gênero, Jenner filtro será como após a chave API que colocamos fim. E então vamos para a documentação e copiamos a parte onde está dizendo qual Jeanette ou qual parâmetro você deseja usar com esta API para obter as informações filtradas. Então, por exemplo, eu ficaria com a Jenna. Então, nesta largura Jenna, eu posso distorcer isso aqui. E depois disso, vou colocar o ID, que será um número, onde será o filme categorias de família. Então, como vamos conseguir essa identificação? Então vamos novamente para a API e vamos ver uma dessas APIs, que é chamado genéricos. Então aqui nós podemos usar isso e nós obteríamos como lista de filmes genéricos. E podemos usar esta API da mesma forma como fizemos com um carteiro para obter também, os mais V ou o ID da categoria familiar. Então vamos abrir o Carteiro e da mesma forma que vamos chamar esse serviço. Então aqui estávamos chamando filmes populares e vamos chamar novamente o ID ou os engenheiros ou as categorias dos filmes. Então vamos copiar esta parte. Podemos dizer lista genérica de filmes. Queremos saber o ID do visto mais para que possamos, depois deste popular, temos, esta é uma API básica como vimos aqui estamos substituindo e aqui está a nossa chave API. Então, desta forma, colocamos aqui e não se esqueça de remover esta barra. E então pressionamos enviar gelo. Temos agora todos os genomas e um deles é família, e a identificação será 10.751. Então vamos copiar este ID. É muito importante copiar a identificação, não o nome. Então, dessa forma, você iria aqui com Jenna e então você colocaria essa identidade aqui. E nós salvamos. E então nós ficávamos bem com os filmes de família deles na página inicial. Então exatamente como fizemos com dv popular. Então copiamos a mesma parte aqui e ligamos para o serviço, que se chama “Obter filmes de família “, zangado. Novamente, para cima, nós importamos dos serviços. E então dizemos aqui uma nova variável de estado que será constante. TV popular, não, precisamos também definir filmes populares ou familiares. Então, aqui vamos obter velocidade de filmes populares. Vamos adicionar filmes de família. E aqui será set filmes de família. Então será definido família. Então, nesse caso, podemos usar também essas duas variáveis de estado. Então, primeiro, vamos definir os filmes de família, que obtivemos a partir da API que temos aqui filmes. E depois dizemos “set family movies”. E então usamos essa variável que criamos aqui. Chamamos de filmes de família. Usamos isso na nossa lista. Então vamos criar outra lista ou outra vista incluindo a lista. E aqui, desta forma, teremos exatamente como, alguns filmes de família. E aqui, em vez de TV popular ou filmes populares, chamaríamos filmes familiares valiosos. Então aqui vamos ter uma variável mini filmes e então vamos executar o simulador. Novamente. Nós salvamos tudo. Vamos ver que temos também os filmes de família, que estão listados aqui. Como você vê, ainda é como o documentário ou uma TV popular. Isso é porque temos importante o serviço, mas nós não usá-lo, Então devemos usá-lo também. Ainda temos TV popular aqui. Assim, conseguiríamos filmes de família e isso refrescará os ratos. Temos agora que filmes de família Jenna, ou categoria que está vindo do APR. Portanto, há a última coisa que se chama documentários. Deixarei que te siga como lição de casa. Você pode fazer isso rápido. Tenho certeza que você pode fazer isso. Será exatamente o mesmo. Basta pesquisar na API e você obteria exatamente isso a partir do áudio da documentação e obtê-lo do geral como fizemos antes. Então, como você vai ver aqui, que temos aromas quentes, sabedoria thriller. E também há algo chamado documentário como você vê aqui. Então eu quero que você crie um serviço e, em seguida, você também, você precisa criar o serviço mais antigo, cria variável de estado e adicionar a lista ou a lista de rolagem para o nosso aplicativo. 35. Refatoração de segunda seção: Ok, vamos fazer alguma refatoração agora no nosso componente da página inicial. Então a primeira refatoração, que eu quero fazer é sobre aqueles coletando os dados de filmes em vários métodos, como nós temos várias promessas, como então e pegar várias vezes. Assim, também podemos fazer tudo isso em um objetivo usando a combinação de promessas. Então você sabe que este está retornando para mim uma promessa como eu lhe mostrei antes. Então agora vamos fazer isso como todos eles em um método e, em seguida, vamos ter um, então, e uma captura. Então, neste caso, não vamos obter derretido vários erros ou vários thens, e teremos acorde longo. Então, para fazer isso, primeiro, eu vou no final deste efeito, como você vê aqui, nós usamos efeito. Depois dele. Nós definimos um componente ou uma constante ou uma função, ou você pode definir isso bem antes dele. Então você não pode dizer constante, podemos dizer ir buscar dados. Então, com esses bons dados, será uma função onde vamos coletar todas as promessas juntos. Então, criando uma função exatamente como fizemos aqui no componente. Definimos uma função como esta. E então temos uma função de seta, e então temos o detalhe da função. Então eu vou aqui e eu vou dizer como eu tenho esses suportes e depois uma fileira. E dentro deste método eu vou definir meus dados. Então, antes disso, não se esqueça de colocar igual para ter a constante no caminho certo. Então agora que Get Data é uma função, eu vou fazer uma promessa onde ele vai retornar para mim uma promessa de todas as funções que eu defini já dentro do efeito. Então, para fazer isso, nós colocamos retorno, apenas retornar. Teremos uma promessa como essa, como se o poema é vidro está vindo do JavaScript. E dizemos tudo. Então, quando nós definir tudo, este será um conjunto de múltiplas promessas que eles vão ser combinados juntos e me dar que exaltar bem na matriz. Então vamos abrir o efeito de uso novamente, temos vários métodos. Então eu vou colocar aqui em toda a matriz onde eu vou chamar todas as funções que eu preciso para os filmes. Então, vamos começar, obter os próximos filmes primeiro. E então vamos conseguir filmes populares. E nós conseguiríamos tão bem que a TV popular. E então nós vamos conseguir aquele documentário e filmes de família porque eu disse que eu criei os filmes documentários como um dever de casa para você e você fez isso. Eu tenho certeza. Agora temos filmes documentais no final. Assim, desta forma, teremos todas essas promessas que foram devolvidas para mim em um objetivo que é chamado de matriz de promessas. Então agora vamos chamar obter método de dados. Então, para usar esse método de dados, estamos usando-o como uma promessa, bem como porque seu retorno para nós uma promessa. E essa promessa, podemos chamá-la de efeito de uso interno. Então nos livramos de tudo isso. Então, vamos continuar assim. E nós chamamos isso de função de dados get aqui. Só podemos fazer um log de console para ter certeza que estamos realmente recebendo os dados da maneira certa. Então eu vou dizer aqui, Obter Dados. E então ele dá obter dados, ele vai retornar para mim então porque é uma promessa. Então, dessa forma, eu vou dizer então, e então eu vou obter valores. E esses valores dessa forma eles também serão uma matriz porque temos a promessa como matriz de velho. Então, dessa forma, vamos colocar o conjunto de promessas exatamente a mesma ordem como colocamos aqui. Assim, a resposta terá todo o retorno de chamada será uma matriz contida próximos filmes, por exemplo, e bem os filmes populares e TV popular e filmes familiares. Então eu coloquei as respostas do array dessa maneira. Estou próximos filmes, filmes populares e TV popular, filmes familiares documentam qualquer filme. Você tem que ter cuidado que você tem a mesma ordem que você colocou que chama aqui, você deve ter o array da mesma maneira aqui também. Portanto, tenha cuidado para não perder seus dados. Então, os filmes populares não terão lugar de outra coisa se você misturar isso. E como você sabe, esta é uma função de retorno de chamada. Então, dessa forma, eu também preciso devolver algo parecido. Podemos fazer isso usando a função de seta como esta. E essa função de seta, eu posso especificar o que vai fazer com essas variáveis, como definir o documento que ele filma set filmes de família e TV popular. Então, dessa forma, eu posso mover todos os itens que estão aqui chamados, para que possamos movê-los dentro deste Get Data então. Então vamos Salvar agora para ver se estamos formatando agora tudo está bem. E agora eu vou colocar meus dados e definir os dados dentro. Então, primeiro de tudo, precisamos ter os próximos filmes e temos os filmes como imagens como você se lembra. Mas em vez de ter filmes aqui, teremos como filmes populares. Então, desta forma, podemos cortar esta parte e colocá-la aqui. E então dizemos próximos filmes para cada filme. E então nós construímos a matriz de imagens de filmes como vimos anteriormente. Mais uma vez, precisamos também de obter os filmes populares. Então podemos colocá-lo aqui depois de filmes populares, mas a variável não será filmes, será filmes populares. E também precisamos ter a TV popular exatamente da mesma maneira que fizemos com todas essas coisas. Então eu vou fazer isso rápido. Então, dessa forma, definimos todas essas variáveis ou variáveis de estado com suas matrizes de bytes ou respostas de que obtendo dados dos serviços que criamos antes. Então não precisamos mais de todos os serviços chamados. Podemos removê-los agora. Então, porque não precisamos novamente ter seco e, em seguida, adicionar captura para cada serviço. Agora, combinamos tudo em um e teremos menos espaço para código. Então não temos muitas chamadas aqui, mas também precisamos pegar o erro. Então, depois disso, então você vê aqui nós temos aqui, então, e depois disso então eu vou colocar aqui captura. E com esta captura, vou pegar um erro. E é exatamente como fizemos antes para pegar o erro que está chegando no caso de haver um problema no back-end. Então, desta forma, eu vou dizer erro e, em seguida, definir erro, que é este. Nós também permanecemos valiosos criados para erro de conjunto. Será um erro. Então, podemos, dessa forma, mostrar alguma mensagem de erro como vimos anteriormente. Mas de qualquer forma, faremos um componente especial para o erro como veremos mais tarde. Então agora vamos salvar tudo e ver se nosso aplicativo ainda está funcionando bem. Como você vê, ainda estamos recebendo os dados multos. A única pequena questão ou aviso que podemos chamar de que temos duplicados nomes de variáveis. Então, porque aqui temos a variável de estado que é chamado de filmes populares. Temos novamente aqui filme popular. Então eu gostaria talvez de sufixar essas variáveis com um dado que podemos colocar como este. Assim, os próximos filmes de dados e também para todo o resto. E dessa forma, podemos distinguir entre essas variáveis valiosas e as variáveis de estado. Então, dessa forma, teremos todos sufixos para seus dados. E aqui teremos também os próximos dados de filmes e, em seguida, filmes populares que, e aqui teremos dados de TV populares e muitos dados de filmes. E o mesmo para o documentário. Então, dessa forma, vamos ter, manter o, como. Não temos duplicação de nomeação de constantes porque não temos filmes populares como uma variável de estado. E então eu defino aqui como uma variável de dados, então é melhor tê-los dessa maneira. Outra coisa que eu queria mostrar-lhe como nós também não podemos mostrar essa vista ou a lista totalmente, por exemplo, este controle deslizante até que os dados estejam prontos. Por exemplo, para a caixa de controle deslizante, eu posso cercar tudo em um objeto como você vê aqui. Então podemos colocar aqui um objeto. E este objeto conterá para mim dados que estou chamando. Por exemplo, neste caso aqui, as imagens de filmes. E então eu coloquei e 2 vezes, como se houvesse imagens de filmes, em seguida, coloque essa visão. Então, dessa forma, eu posso muito bem colocar a vista no caminho. Como se não tivéssemos problemas quando não temos filmes, imagens. Esses são controles deslizantes, não será mostrado se não houver imagens de filmes ou imagens de filmes é indefinido. Então faremos o mesmo com os outros. Então, da maneira como podemos fazê-lo como para evitar quaisquer problemas. Você pode apenas criar um objeto. E dentro deste objeto você coloca a variável de dados. E então você coloca e, e então você coloca outros suportes. E dentro desses suportes você pode colocar aqui a vista em si. E quando você salvar mais bonito, vamos salvar para todos vocês ou reformatar para vocês esse código. Então eu vou fazer o mesmo para os outros tipos de filmes. Então podemos ter aqui o nome do filme e também aqueles colchetes para que possamos colocá-lo em tudo. Então vamos ter este e também este aqui e também este aqui vamos colocar TV popular. Se não houver TV popular, em seguida, reservado. Não mostre nada e coloque a vista se houver TV popular. A mesma coisa que faremos também para filmes de família, visualizações e também aqui. Então, por que estou fazendo isso? Eu estou fazendo isso porque eu quero evitar qualquer problema pode acontecer com a minha aplicação como pendurar ou que não está mostrando ou qualquer coisa. Então você precisará cercar seu aplicativo sempre com os dados certos, porque caso contrário você terá problemas. Sempre quando apareceremos para o usuário. Portanto, nada deve ser mostrado ao usuário, usuário C, sempre o aplicativo é estável sem erros inesperados. Então você precisa sempre cercar o, quaisquer problemas esperados podem acontecer em seu aplicativo. E talvez você vai se perguntar como eu posso adicionar comentários em React Native. Então, se você ver aqui, você pode adicionar um comentário pressionando Control Slash. Por exemplo, você pode colocar aqui filmes de família como este. E então você coloca a barra de controle ou barra de comentário no teclado. E então será assim. Então será objeto e dentro dele um comentário. Você não pode colocar um comentário como este sozinho no React Native porque este é um comando não reconhecido. Então, para colocar um comentário, você tem que colocá-lo dessa maneira entre objetos. Então você pode dizer também que temos os comentários, como para muitos filmes ou qualquer comentário para descrever suas funções da maneira certa, Vou colocar bem os programas de TV populares e outros comentários que fazemos aqui. Então, desta forma, vamos fazer também documentação para os desenvolvedores. Então você também pode colocar comentários para o desenvolvedor que para descrever o que é este método ou o que esta visão está fazendo. Então, dessa forma, você não terá qualquer problema de não entender seu código. Estamos entre os desenvolvedores. Mas antes de passarmos para o próximo passo, talvez você veja um erro acontecendo em seu aplicativo quando definimos todas essas condições, como aqui, como você vê, temos aqui filmes, imagens e todas essas condições. E esse erro dizendo que a string de texto deve ser renderizada dentro de um componente de texto. Isso está acontecendo porque inicializamos nossas variáveis de estado com um valor de string. Então, dessa forma, quando você está dizendo que, ok, eu tenho uma string, valor de string vazio. Precisávamos disso antes porque queríamos inicializar nosso estado. Então, dessa forma, nós rolamos ou visualizamos, teremos aqui uma string, valor de string vazio, que não é possível renderizar porque você deve ter uma string dentro de um texto ou um componente de texto. Então, dessa forma, é melhor sempre colocar todos esses estados iniciais como nada, como indefinidos ou não. Assim, desta forma, seu aplicativo será carregado bem sem qualquer inicialização de strings. Então você vai evitar esse erro se você vê-lo. Assim, desta forma, você pode renderizar como um objeto ou valor indefinido inicialmente no ScrollView, e então ele será preenchido com dados e, em seguida, o, nossos pontos de vista serão renderizados corretamente. Então, apenas uma coisa importante, certifique-se de que você está inicializando estados de cura com valores vazios. Nada de especial. Então temos aqui como por exemplo, o erro é inicializado foi falso. Tudo bem, porque precisamos, no início, que não tenhamos nenhum erro. E então definimos o erro como verdadeiro quando temos como algum erro. Mas aqui temos, estamos assumindo que todas essas variáveis de estado são nulas ou indefinidas no início. Então, dessa forma, temos agora comentários e documentação clara do meu código. E também cerquei tudo para não ter erros aqui. Portanto, esta é a refatoração mais importante que podemos fazer para o aplicativo homepage. Nas próximas palestras, veremos como adicionar carregamento e como podemos adicionar também o componente de erro no caso de haver um problema em nossa API do aplicativo. 36. Adicione o Spinner: Tudo bem, aqui estamos nós em uma nova seção. Vamos ver como podemos implementar uma navegação. Por que precisamos da navegação, essa navegação é necessária no caso em que eu quero visitar algum filme, quando eu quero ir para o detalhe do filme. Então, quando eu clicar nesse filme, eu vou navegar para outra tela ou outra página. Assim que a navegação em React Native está trabalhando com alguma maneira específica onde precisamos de alguma biblioteca externa, que é chamado de navegação nativa Reagir. E precisamos instalar esta biblioteca para poder navegar em várias telas em nosso aplicativo. Mas antes de tudo, como você vê aqui, temos um erro que é, Eu esqueci de corrigir na seção anterior, nós apenas dizemos falhou tipo prop conteúdo inválido prop. O conteúdo da Europa membro da lista de conteúdo está vindo como uma matriz. E dissemos que aqui é um objeto. Então, quando a API ou a página inicial está enviando para sua lista uma matriz e aqui é um objeto, então vamos ter esse erro. E também você pode ver os detalhes desse erro no terminal. Como você vê aqui. Por exemplo, eu tenho aqui como preenchido prop tipo inválido prop tipo conteúdo de matriz tipo porque eu fornecido aqui e matriz. Então, é melhor mudá-lo também. Você não pode ter uma matriz de opções ou lista, então você pode ter várias opções de que estranho para mim. Vou colocá-lo como uma matriz. E como você vai ver, o erro se foi e nós não vamos tê-lo mais. Então isso é y é um benefício da digitação. Quando os dados vêm em tipo diferente do que você especifica aqui, então você vai notar esse erro. E isso é uma grande coisa sobre prototipagem. Ok, vamos para a nossa navegação React. Quando você quiser ir e instalar essa navegação, você precisa visitar um site chamado React navigation.org. E quando você vai a este site e você vai para a página inicial, como você vê aqui, você verá algo chamado redox. E precisamos aqui para instalar esta biblioteca. Então eu aconselho que você sempre leia a documentação com muito cuidado porque às vezes é realmente complicado instalar a biblioteca de navegação, especialmente com React Native. E vamos usar aqui React Native CLI, não exportar. Então você tem que levar em conta que você está usando o React Native CLI. Então, agora vamos começar. Então, primeiro de tudo, você precisa ver alguns místicos de tijolos como, por exemplo, aqui você precisa ter um React Native Express. Você precisa de algum conhecimento em Reagir cujas repreensões React Context. Certo, não há problema com isso. Vamos começar a instalar a biblioteca. Primeiro de tudo, você precisa executar npm instalar React Native ou reagir nativo navegação. Então você será capaz de instalar esta biblioteca. Vamos para o nosso Visual Studio Code e instalar esta biblioteca. Vou abrir o terminal como sempre aprendemos anteriormente, e colar este comando aqui. Ok, aqui a biblioteca foi instalada e eu tenho a minha instalação pronta. Vamos continuar na documentação. Você tem que ler a documentação com muito cuidado. Então aqui diz que esta biblioteca irá instalar agora o nosso manipulador de gestos nativos Reagir, Reagir nativo, 3D animado Reagir telas nativas Reagir contextos de área segura nativa. Eles agem máscara nativa para ver. Então todos aqueles que precisamos instalá-los. Então aqui está dizendo que você tem que instalar para diferentes CLI's. Um deles é Expo e o outro é React Native. E como estamos usando o React Native CLI, vamos copiar este comentário. Você sempre, às vezes algo chamado Yarn. O fio é exatamente como o MPM. Você pode ir para a documentação do fio e você também pode instalá-lo e usar R1 ou fio em vez de MPM. Assim, desta forma, vou copiar este comentário. Você tem aqui um botão de cópia para que você possa copiá-lo. E então todas as bibliotecas que são mencionadas aqui, serão instaladas. Agora, vamos novamente e tentar instalar essas bibliotecas usando nossa linha comum. E então eu vou colá-lo e vamos esperar a instalação. Ok, agora a instalação está pronta. Então eu tenho algum aviso aqui que ele está dizendo como MPM está disponível, atualização no NPM, sua atualização de NodeJS. Portanto, sempre que você precisa instalar, você pode apenas ver como atualizá-lo. É só executar o NPM instalar um MPM global. Então, quando você vê esta nota, isso significa que você pode atualizar para uma versão superior do NodeJS e também para o sistema de gerenciamento de pacotes para que você possa atualizá-lo também. Então aqui nossas bibliotecas foram instaladas porque estamos usando React Native, precisamos executar algum comentário. Aqui. Ele diz que você não precisa ou do React Native 0.6 e superior. Como se a vinculação fosse automática. O que ele quer dizer por vincular, vincular Reagir nativo para componentes iOS ou componentes Android, que estão nos projetos que temos. Como podemos ver aqui. Eles são automaticamente vinculados como iOS e Android. Porque a instalação. Dessas bibliotecas é ir para os módulos de nó e você precisa vincular os componentes e os componentes nativos que são instalados no iOS ou Android ou um módulo de nó, você precisa vinculá-los juntos a partir de React Native 0.6 e superior. Você não precisa fazer isso como React Native link. Mas se você tiver baixo ou menor React Native, então você precisa executar este comentário. Mas no meu caso, não preciso dele por enquanto. Então ele está dizendo que se você está no Mac e desenvolvendo para iOS, como meu caso aqui, como você vê, eu estou usando iOS, eu estou usando Mac. Você deve executar este comando que é chamado MAX pod instalar iOS. Então, dessa forma, você precisa instalar outras bibliotecas, mas eles vão para onde as bibliotecas do projeto iOS. Então, desta forma, eu vou colar este comentário aqui e executá-lo. E, em seguida, após a instalação dessas bibliotecas, você precisa saber que qualquer instalação de como, por exemplo aqueles pod instalar, como vimos anteriormente, você precisa reiniciar o URI do projeto para reiniciar o simulador iOS também. Então, nesse caso, nosso projeto não funcionará somente quando reiniciarmos o projeto. Então, como vemos aqui, temos o terminal, por exemplo aqui, este, você precisa fechá-lo totalmente. E, em seguida, em seu terminal, você precisa executar o comentário que é chamado Reagir nativo executar iOS. A mesma coisa vale para o Android. Então você também precisa reiniciar seu projeto novamente após instalação de algumas bibliotecas para não obter um erro como vemos aqui. E em React Native está dizendo para finalizar a instalação de React Native. Como manipulador de gestos, que é uma biblioteca que é anexada com as bibliotecas que ele instalou. Adicione o seguinte. No topo. A parte superior do arquivo de entrada, que é ab.js ou index.js. Então, desta forma, eu preciso usar essa importação e adicionado ao meu app.js. Então precisamos ir aqui, e depois vamos para app.js. E aqui eu preciso importar esta biblioteca. E ele disse que é melhor estar no topo. Por isso, temos de pôr isso no topo da lista das importações. Então, depois disso, estamos nos certificando de que a biblioteca da navegação funcionará bem. Então aqui vemos como instalamos esta biblioteca. Sempre quando há algumas atualizações, você precisa sempre seguir a documentação porque algumas atualizações podem ser surgir, algumas atualizações talvez vamos mudar ou alguma maneira de instalação vai mudar. Portanto, é melhor sempre seguir a documentação no momento da gravação deste vídeo. É assim que te mostrei. Então agora vamos fazer um exemplo da navegação, como veremos na próxima palestra. Mas lembre-se, reinicie seu aplicativo antes de iniciar a próxima palestra. 37. Adicione o componente de erro: Ok, nesta palestra vamos fazer um componente de erro para exibir como algum erro aqui no caso de os dados não são carregados de uma maneira correta. Então, podemos criar um componente como fizemos anteriormente. Então eu vou para a pasta de componentes e, em seguida, eu vou dizer aqui erro Node.js e esta seta ponto ponto JS eu vou usar os trechos. Então, para gerar um componente puro e gerar componente puro para um, B, B, C, S e fim de semana classe componente puro para que possamos remover esta parte estado. E como eu disse anteriormente, precisamos importar isso ou estender isso de reagir. Portanto, precisamos importar também neste componente reagir. Então podemos fazer isso usando EMR. Assim, desta forma temos React importado de React. Então agora nosso componente está pronto. Então, para mim, como componente, eu criaria, por exemplo, dois erros. E esses erros, eles podem ser como algo. A primeira linha pode ser que algo deu errado. E o outro, podemos ser como certifique-se de que você está online e reiniciar o aplicativo. Mas nós também fazemos esses componentes de alguma forma dinâmica, que possamos dar valores padrão para nossos adereços. Primeiro de tudo, vamos ter dois prompts. E essas duas sondas, podemos dar-lhes nomes. Eles podem ser, por exemplo, podemos dizer algo como texto de erro 1 e texto de erro dois. E esses dois prompts, em seguida, novamente obter um nome como texto de erro 1 e texto de erro também. Então eu vou colocar aqui constante, como um prompts será erro Text1 ou texto de erro. Podemos dizer um texto e erro para a linha dois. E então ele terá este ponto adereços. E podemos fazer divs para esses avisos. Então podemos também importar os tipos de uma forma ou direita, os tipos que podemos dar aqui, tipos de prop e texto de erro um terá tipo prop uma string porque eles vão ser apenas uma string. E erro leva dois terá, bem como string. Assim, desta forma eu tenho os tipos de adereços, eu também tenho, os prompts para o seu componente. Então, em seguida, podemos criar no modelo como algum modo de exibição, e esta visão será no meio do aplicativo. Portanto, precisamos importar também o componente de visualização. Então temos aqui uma visão, precisamos importar, uma visão do solo nativo React. Temos aqui vista e ele virá de React Native. Assim, desta forma, teremos a visão da maneira certa. E, em seguida, dentro da vista, terei dois componentes de texto. Então precisamos importar também esses componentes de texto. Então eu vou ter aqui texto, e então eu vou chamar aqui que o componente x. Então temos aqui Text1 ou como componente fixo primeiro. E incluirá dentro dele o, o, o componente ou o erro Text1. Assim, desta forma, teremos texto de erro um na primeira linha e texto de erro também na segunda linha aqui. Então vamos fazer também um pouco de estilo. Então vou definir uma constante, podemos chamá-la de estilos. E esses estilos serão importados da folha de estilo, que vamos importar. E isso terá criar método. E podemos criar método, definir a possibilidade de ter várias classes para o nosso estilo. Então, vamos importar a folha de estilo bem do componente Reagir nativo. Então temos aqui, o componente é importante. Temos criar e vamos definir um classes também. Então vamos fazer como para o recipiente como sempre, podemos dar-lhe um estilo e este estilo pode ser importado de estilos. E podemos dar-lhe como chamamos recipiente, como qualquer classe que sempre fazemos no aplicativo. Então este recipiente terá exatamente as mesmas coisas que estamos definindo sempre. Então recipiente terá pernas um, justificar centro de conteúdo, alinhar itens, centro. Podemos também dar-nos a morrer por estes textos de erro. Então, podemos dar o seu estilo e estes estilos terão como o nome do texto. Podemos dar assim. E o mesmo acontecerá para a segunda linha do componente adulto. Então aqui teremos outra classe que será chamada de texto. E este texto contém como as propriedades que podemos dar à cor. Podemos dizer cor. Aqui, podemos dar como preto ou não podemos dar qualquer cor. Levaria por padrão a cor preta. E nós podemos dar aqui font-weight para ser como negrito, para ser algo como um grande, um pouco para que o usuário possa lê-lo. E não esquecemos no final porque temos tipos de prontidão, podemos dizer isso também. Componente de erro, este que criamos antes é adereços tipos de ele é os tipos de prop que eu defini no topo. Assim, desta forma, eu garanto que este componente está lendo esses tipos de prompts. Então, dessa forma, nosso componente está pronto, podemos usá-lo. Agora, eu tenho que remover este ponto-e-vírgula. - Também. Aqui eu tenho um erro que é chamado de tipos de adereços. Preciso importar os tipos de adereços, o que fizemos também antes. Então precisamos importar o tipo de prop de tipos de prop. Assim, desta forma teremos todos os itens definidos e nosso componente está pronto para uso. Então, chegamos novamente à página inicial e podemos na tela inicial, você foi este erro como corpo estado capaz de exibir um erro exatamente como fizemos com carregado. Então podemos definir também aqui se há ou há erro, como se não tivéssemos um erro. Então, se houver estado de erro, e então você pode exibir o componente que é chamado de erro. Então, desta forma, precisamos importar nosso componente. Então temos aqui erro. E este erro será como fechado imediatamente porque é um único tipo ou linha única. Ele não tem nenhum conteúdo. Então precisamos importar o erro. Então vamos para o topo e depois vamos para as nossas importações. Podemos fazer isso aqui depois de importar a lista. Então eu vou dizer aqui Erro de importação de, e então eu vou colocar meus componentes, e esses componentes será um deles erro. Então, dessa forma, eu importado por componente de erro. Agora, bom, temos tudo está bem, mas não temos a capacidade de ver a mensagem de erro aqui porque atualmente não temos nenhum erro, porque depois desse erro inicialmente tem um falso. Então, quando há um erro em nossa API, então podemos configurá-lo para 0, não de todo o que fazer. Então, dessa forma, podemos também remover esse erro. Podemos fazer uma ligação como esta para não fazer uma reclamação de sono. E então temos o erro definido também. Então precisamos dizer que, se houver, ele está carregado e não há erro. Então, nós também podemos adicionar outro fim para dizer que, se não houver nenhum erro, então ok, Exibir para mim, o aplicativo ou a visão de rolagem, tudo isso. Mas quando houver um erro, exiba esse componente de erro. - Legal. Então temos agora aqui, se não houver nenhum erro, então vamos inverter a condição como fazemos sempre apenas para testes. Então eu estou recebendo um erro aqui porque eu acho que há um erro de digitação. Então eu sei que é um protótipo, então nós devemos ter um tipo de adereço, tipos de culturas. Então você tem que ter cuidado sempre com erros de digitação para evitar como algumas setas como esta. Então vamos salvar. Ok, agora temos uma página vazia. Então esta página vazia, porque não temos nenhum valor, não temos nenhuma entrada ou parâmetro para este erro porque temos adereços aqui e aqueles não têm nenhum valor. Assim, desta forma, podemos definir um valor padrão para esses erros. Assim, da mesma forma como fizemos com tipos de adereços, podemos definir também em valores padrão. Então esses valores padrão, podemos defini-los da mesma forma como temos tipos abruptos. Então podemos definir uma constante, chamamos de adereços padrão e erro. Texto1 terá orbes, algo deu errado. Erro em x2 terá também esta frase. E então podemos usar da mesma maneira como fizemos com os tipos de suporte de erro. Podemos dizer erro pontos valores padrão. Então, em adereços padrão. Dessa forma, as portas padrão serão atribuídas exatamente da mesma forma como são nomeadas. Portanto, o nome de erro text1 terá este valor e erro leva dois terá este valor. Quando salvarmos, veremos que temos Ops. Tudo correu, algo deu errado. Então vamos reverter essas condições. Então, quando houver erro, mostre-me esta mensagem de erro. Quando não houver erro, então me mostre o carregamento de filmes e o aplicativo de filmes ou a lista de filmes que temos aqui. 38. Como instalar a navegação a: Tudo bem, aqui estamos nós em uma nova seção. Vamos ver como podemos implementar uma navegação. Por que precisamos da navegação, essa navegação é necessária no caso em que eu quero visitar algum filme, quando eu quero ir para o detalhe do filme. Então, quando eu clicar nesse filme, eu vou navegar para outra tela ou outra página. Assim que a navegação em React Native está trabalhando com alguma maneira específica onde precisamos de alguma biblioteca externa, que é chamado de navegação nativa Reagir. E precisamos instalar esta biblioteca para poder navegar em várias telas em nosso aplicativo. Mas antes de tudo, como você vê aqui, temos um erro que é, Eu esqueci de corrigir na seção anterior, nós apenas dizemos falhou tipo prop conteúdo inválido prop. O conteúdo da Europa membro da lista de conteúdo está vindo como uma matriz. E dissemos que aqui é um objeto. Então, quando a API ou a página inicial está enviando para sua lista uma matriz e aqui é um objeto, então vamos ter esse erro. E também você pode ver os detalhes desse erro no terminal. Como você vê aqui. Por exemplo, eu tenho aqui como preenchido prop tipo inválido prop tipo conteúdo de matriz tipo porque eu fornecido aqui e matriz. Então, é melhor mudá-lo também. Você não pode ter uma matriz de opções ou lista, então você pode ter várias opções de que estranho para mim. Vou colocá-lo como uma matriz. E como você verá, o erro se foi e não teremos mais isso. Então isso é y é um benefício da digitação. Quando os dados vêm em tipo diferente do que você especifica aqui, então você vai notar esse erro. E isso é uma grande coisa sobre prototipagem. Certo, vamos para a navegação React. Quando você quiser ir e instalar essa navegação, você precisa visitar um site chamado React navigation.org. E quando você vai a este site e você vai para a página inicial, como você vê aqui, você verá algo chamado redox. E precisamos aqui para instalar esta biblioteca. Então eu aconselho que você sempre leia a documentação com muito cuidado porque às vezes é realmente complicado instalar a biblioteca de navegação, especialmente com React Native. E vamos usar aqui React Native CLI, não exportar. Então você tem que levar em conta que você está usando o React Native CLI. Então agora vamos começar. Então, primeiro de tudo, você precisa ver alguns místicos de tijolos como, por exemplo, aqui você precisa ter um React Native Express. Você precisa de algum conhecimento em Reagir cujas repreensões React Context. Certo, não há problema com isso. Vamos começar a instalar a biblioteca. Primeiro de tudo, você precisa executar npm instalar React Native ou reagir nativo navegação. Então você será capaz de instalar esta biblioteca. Vamos para o nosso Visual Studio Code e instalar esta biblioteca. Vou abrir o terminal como sempre aprendemos anteriormente, e colar este comando aqui. Ok, aqui a biblioteca foi instalada e eu tenho minha instalação pronta. Vamos continuar na documentação. Você tem que ler a documentação com muito cuidado. Então aqui diz que esta biblioteca irá instalar agora o nosso manipulador de gestos nativos Reagir, Reagir nativo, 3D animado Reagir telas nativas Reagir contextos de área segura nativa. Eles agem máscara nativa para ver. Então todos aqueles que precisamos instalá-los. Então aqui está dizendo que você tem que instalar para diferentes CLI's. Um deles é Expo e o outro é React Native. E como estamos usando o React Native CLI, vamos copiar este comentário. Você sempre, às vezes algo chamado Yarn. O fio é exatamente como o MPM. Você pode ir para a documentação do fio e você também pode instalá-lo e usar R1 ou fio em vez de MPM. Assim, desta forma, vou copiar este comentário. Você tem aqui um botão de cópia para que você possa copiá-lo. E então todas as bibliotecas que são mencionadas aqui, serão instaladas. Agora, vamos novamente e tentar instalar essas bibliotecas usando nossa linha comum. E então eu vou colá-lo e vamos esperar a instalação. Ok, agora a instalação está pronta. Então eu tenho algum aviso aqui que ele está dizendo como MPM está disponível, atualização no NPM, sua atualização de NodeJS. Portanto, sempre que você precisa instalar, você pode apenas ver como atualizá-lo. É só executar o NPM instalar um MPM global. Então, quando você vê esta nota, isso significa que você pode atualizar para uma versão superior do NodeJS e também para o sistema de gerenciamento de pacotes para que você possa atualizá-lo também. Então aqui nossas bibliotecas foram instaladas porque estamos usando React Native, precisamos executar algum comentário. Aqui. Ele diz que você não precisa ou do React Native 0.6 e superior. Como se a vinculação fosse automática. O que ele quer dizer por vincular, vincular Reagir nativo para componentes iOS ou componentes Android, que estão nos projetos que temos. Como podemos ver aqui. Eles são automaticamente vinculados como iOS e Android. Porque a instalação. Dessas bibliotecas é ir para os módulos de nó e você precisa vincular os componentes e os componentes nativos que são instalados no iOS ou Android ou um módulo de nó, você precisa vinculá-los juntos a partir de React Native 0.6 e superior. Você não precisa fazer isso como React Native link. Mas se você tiver baixo ou menor React Native, então você precisa executar este comentário. Mas no meu caso, não preciso dele por enquanto. Então ele está dizendo que se você está no Mac e desenvolvendo para iOS, como meu caso aqui, como você vê, eu estou usando iOS, eu estou usando Mac. Você deve executar este comando que é chamado MAX pod instalar iOS. Então, dessa forma, você precisa instalar outras bibliotecas, mas eles vão para onde as bibliotecas do projeto iOS. Então, desta forma, vou colar este comentário aqui e executá-lo. E, em seguida, após a instalação dessas bibliotecas, você precisa saber que qualquer instalação de como, por exemplo aqueles pod instalar, como vimos anteriormente, você precisa reiniciar o URI do projeto para reiniciar o simulador iOS também. Então, nesse caso, nosso projeto não funcionará somente quando reiniciarmos o projeto. Então, como vemos aqui, temos o terminal, por exemplo aqui, este, você precisa fechá-lo totalmente. E, em seguida, em seu terminal, você precisa executar o comentário que é chamado Reagir nativo executar iOS. A mesma coisa vale para o Android. Então você também precisa reiniciar seu projeto novamente após instalação de algumas bibliotecas para não obter um erro como vemos aqui. E em React Native está dizendo para finalizar a instalação de React Native. Como manipulador de gestos, que é uma biblioteca que é anexada com as bibliotecas que ele instalou. Adicione o seguinte. No topo. O topo do arquivo de entrada, que é ab.js ou index.js. Então, desta forma, eu preciso usar essa importação e adicionado ao meu app.js. Então precisamos ir aqui, e depois vamos para app.js. E aqui eu preciso importar esta biblioteca. E ele disse que é melhor estar no topo. Por isso, temos de pôr isso no topo da lista das importações. Então, depois disso, estamos nos certificando de que a biblioteca da navegação funcionará bem. Então aqui vemos como instalamos esta biblioteca. Sempre quando há algumas atualizações, você precisa sempre seguir a documentação porque algumas atualizações podem ser surgir, algumas atualizações talvez vamos mudar ou alguma maneira de instalação vai mudar. Portanto, é melhor sempre seguir a documentação no momento da gravação deste vídeo. É assim que te mostrei. Então agora vamos fazer um exemplo da navegação, como veremos na próxima palestra. Mas lembre-se, reinicie seu aplicativo antes de iniciar a próxima palestra. 39. Como criar um navegador Stack: Ok, até agora nós não terminamos com a navegação para agora nós não podemos navegar para outra página ou o detalhe do filme. Então vamos continuar na documentação de React, Native e navegação. No final, quando fizemos todas as informações da primeira página, há algo continuar a navegação Hello React. Aqui ele vai nos dar um exemplo de como podemos mover para outra página do aplicativo React. Então, desta forma, você precisa instalar algo chamado stack navigator library. E instalar esta biblioteca é apenas usando um comentário MPM, instalar, Reagir navegação e, em seguida, pilha. Então, estou a rever a documentação rapidamente. Claro que você terá tempo para lê-lo e, bem, você precisa saber mais informações sobre este navegador pilha doc navegador realmente é como algo como está segurando minhas páginas antigas onde eu vou navegar para. Então, desta forma, eu vou ter a página inicial, eu vou ter o detalhe. Terei a página de busca deles. Terei todas as outras páginas que quero mostrar na minha aplicação. Então, desta forma, precisamos instalar MPM, Reagir pilha de navegação nativa. Então vamos para o código novamente e, em seguida, colar este comentário. E vai instalar para mim esta biblioteca. Então, depois disso, usando esta biblioteca, veremos um exemplo fornecido pelo React Native Navigator. Então, temos que criar um navegador de pilha, criando uma pilha agora Vd navegador é fornecido neste exemplo. Então, por exemplo, temos que criar um componente. Este componente que vamos chamá-lo em algo chamado contêiner de navegação. E neste contêiner de navegação, terei um navegador de pilha. E para cada página no aplicativo, eu vou ter uma tela de pilha. Então, desta forma, eu vou ter tela inicial. Eu vou ter tela bem detalhada e eu vou ter a tela de pesquisa. Então vamos fazer exatamente da mesma maneira que ele fez. Então, em primeiro lugar, precisamos importar duas coisas. Um deles é criar pilha Navigator. Então, eu vou importar este método que é chamado Create Stack navigator. E também, ele poderia definir uma constante que é chamada pilha. E esse DAG, ele chamou essa função que importamos aqui. Então vamos fazer o mesmo em app.js. Então vamos fechar o terminal. E então vamos dizer aqui importar, Reagir ou criar navegador pilha. E vamos definir a nossa constante que é chamado pilha. Então voltamos novamente para o código e então definimos essa constante aqui. Então, depois disso, dentro desta visão, você não terá essa visão. Não vamos ligar para casa. Estamos colocando este componente de casa na pilha. Como podemos fazer isso. Então, primeiro precisamos dizer ou contêiner de navegação. Porque o contêiner de navegação, como você vê aqui, é um componente que gerencia o seu, nossa árvore de navegação e contém o estado de navegação. Este componente deve envolver toda a estrutura do navegador. Normalmente, nós renderizaríamos esse componente na raiz do nosso aplicativo, que geralmente é componente ou exportado do app.js. Então vamos fazer o mesmo para não sair da documentação. Então eu vou ter um contêiner de navegação e, em seguida, pilha navegador, e então eu vou chamar esse componente para que possamos copiar toda essa parte e, em seguida, ir para o nosso aplicativo. Nós removemos toda essa exibição ou vamos colocá-la como perto dela para ver o que podemos copiar novamente. Então eu tenho contêiner de navegação, precisamos importá-lo também. Então eu vou ser importante novamente. Então vamos aqui e dizemos que precisamos importar o contêiner de navegação. E então temos o navegador de ponto de pilha. Exactamente. Esta pilha tem um método que é chamado ou tem um componente que é chamado Navegador. E esta pilha Navigator tem também um componente que é chamado de tela. Então, podemos alcançar esses componentes usando este operador, que é ponto normalmente. Então podemos dizer um nome para esse componente. Por exemplo, pobreza que navegação, e, em seguida, especificar o componente que vamos navegar para. Então, no nosso caso, é chamado de lar. Nós já importamos o componente de casa, então eu posso colocar aqui em casa. E então vamos sentar mais esta visão que tínhamos anteriormente aqui. E então salvamos nosso aplicativo e vamos para o simulador e veremos o que está acontecendo. Então agora nós, como você vê que não temos nenhum problema em nossa aplicação. E no topo, veremos que temos alguma área salva, como antes do aplicativo estar cheio na tela. Então eu vou ter um controle que rapidamente, apenas para mostrar a vocês, você vê que nosso aplicativo é totalmente cair na tela para que às vezes você não pode ler todas essas informações são vários formulários. Então, o navegador está usando algo chamado Salvar área de navegação ou tela de área segura. Assim, você pode garantir que seu navegador está trabalhando de uma forma que salvar toda essa área não vai se mover ou para o topo, para o formulário. Vai ter algum espaço aqui. Então eu vou colocar esse código de volta. E como podem ver, temos aqui esta área segura. Então vamos ver mais tarde como podemos remover todas essas propriedades. Como por exemplo, podemos remover como este nome que é chamado de casa. Nós também podemos fazer algumas outras opções como veremos mais tarde. Então, agora vamos remover esta importação desta vista para que não precisamos mais dela. E importamos tudo isso. E o nosso navegador dessa forma está funcionando perfeitamente. Quando você receber alguns erros, certifique-se de que você iniciou seu aplicativo como eu disse anteriormente. Então você precisa terminar o terminal e, em seguida, cláusula totalmente e , em seguida, executar o aplicativo novamente usando o comando executar iOS, como vimos anteriormente. 40. de detalhes para filmes: Ok, então nesta palestra nós vamos adicionar uma nova tela, que será a cauda do filme. Então, quando eu clicar aqui, Eu devo navegar para o detalhe dos filmes ou um novo componente que é chamado de detalhes. Então, aqui se você se lembra na pilha Navigator, criamos várias telas e uma delas é a casa. Assim, desta forma, podemos também adicionar a página de detalhes para que possamos ir aqui e dizer que eu quero aqui detalhes. Podemos dar como uma mensagem instantânea, como detalhes. E também o componente será chamado de detalhe. Então vamos criar o componente de detalhes. Vou para a pasta de telas e, em seguida, vou criar um arquivo. Vou chamar esse arquivo de detalhes. E neste detalhe, vamos criar um componente. Se você se lembrar, não criamos o componente da página inicial usando os trechos, e faremos da mesma maneira com os detalhes. Então, se você se lembrar, temos esse comentário que é chamado F, são componentes sem estado retornar. E desta forma teremos esta const e então teremos os detalhes. E, claro, teremos as outras informações de que precisamos. E vamos importar também, eles reagem. Então eu vou dizer aqui estão seus três atos de React. E então vamos usar aqui o fragmento, se você se lembrar. Então vou colocar aqui um componente. Eu vou dizer React dot fragment. E dentro deste fragmento podemos colocar algum texto, todos vocês, apenas para dizer que este é o detalhe do filme para que possamos ver como podemos navegar até ele. Então eu vou dizer aqui como um texto. E esse componente de texto conterá, por exemplo, algo como, digamos, detalhes de filme, exatamente assim. Assim, dessa forma, poderemos ver a página detalhada do filme quando quisermos navegar até ela. E também não se esqueça de importar o componente de texto do React Native. Então vamos salvar este componente e vamos para o nosso app.js e precisamos importar os componentes detalhados. Então aqui temos que fazer uma importação e, em seguida, detalhes de. E então colocamos as telas exatamente como fizemos com o componente doméstico para que possamos também obter os detalhes. Então, dessa forma, chamamos o componente bolas. Ok, legal. Tudo está funcionando bem. Não recebemos nenhum erro até agora, então podemos continuar com a documentação da biblioteca. E se você se lembrar, nós adicionamos como uma tela e vamos adicionar outra, que já adicionamos. Então há alguma inflamação que talvez seja interessante para você, como configurar o navegador. Configurar o Navegador vem sempre como acontece com alguma configuração extra que você deseja adicionar ao navegador. Por exemplo, ele diz, como se pudéssemos adicionar algo chamado Opções. E, em seguida, nesta opção, você pode especificar um título desta navegação. Então esse título será exibido aqui no topo. Então, dessa forma, você pode ter algumas opções extras. Mas vamos continuar mais. Como se voltarmos a esta passagem adereços adicionais mais tarde. Mas primeiro precisamos ver como podemos navegar entre as telas. Então eu quero passar para outra seção que é chamado de movimento entre telas. Então aqui temos também algo como exatamente como HTML. Eu quero ter um link e eu pressioná-lo, e então eu vou para a página de detalhes. Mas é exatamente como é feito com HTML. Faremos isso com React Native. Precisamos de um botão, precisamos de um evento. Nós, quando precisamos que o usuário clique em algo para ir ao detalhe do filme. No nosso caso aqui temos clicando nesses botões ou podemos dizer clicando nesses cartões. Se você se lembrar, este componente chamado cartão, e nós criamos este cartão como uma opacidade tocável, se você se lembrar. Então precisamos usar também o componente que é chamado de opacidade tocável. Precisamos adicionar a função de compressão. Então nós temos aqui na imprensa e então você tem que passar alguns parâmetros. Vamos ao nosso cartão e depois veremos como podemos fazer isso. Então guardado ponto js, se você se lembra, usamos algo chamado opacidade tocável. Então vamos para este componente na biblioteca de componentes e vamos ver como podemos usar essa opacidade tocável na documentação. Como você vê, temos algum método que é chamado na imprensa para opacidade tocável. Então, podemos usar o mesmo método ou a mesma propriedade para especificar um método exatamente como ele fez na documentação da navegação ao usar um botão. Então vamos adicionar esta função à nossa guarda. Vou voltar ao código e verei aqui que tenho opacidade tocável. E então temos compressa e temos em método de imprensa e método de compressão. Ainda não está definido. Vamos defini-lo exatamente como definido na maneira na biblioteca de navegação. Então você teria ele no peito e, em seguida, será uma função chamada seta função. E ele disse navegação, navegação de pontos e detalhes. Então, dessa forma, eu preciso especificar em seu cartão que eu preciso navegar na navegação. Para navegar até a página de detalhes. Ok. E o que essa navegação vem, de onde vem daqui, tela inicial, você precisa usar algo variável de estado, que é chamado de navegação, e está dentro de um objeto. E então você precisa definir uma navegação e você pode usá-la dentro. Então, desta forma, o componente de educação em casa sabe que tem alguma propriedade chamada navegação. E esta navegação vai me ajudar a navegar para outra tela. Então é exatamente como algo, um link, eu estou dizendo, ok, nesta tela inicial eu tenho um link. E nestes links eu quero vincular ou ir para outra página que é chamado de detalhes. Então vamos fazer o mesmo. Mas aqui não estamos na tela inicial como você vê, estamos em um cartão, em um componente. Então, primeiro de tudo, vamos para a nossa tela inicial e, em seguida, adicionar este objeto, que é chamado como dentro dele, nós chamamos de navegação. E esta navegação, eu vou passá-la como um adereços para o componente de cartão. É muito importante porque precisamos passar esta função que você não pode fazer aqui como diretamente. Caso contrário, ele vai se mover em que tem fora deste DAG da árvore de navegação. Portanto, a árvore de navegação deve ser consistente, ela deve ser especificada. Então eu preciso ir da tela inicial. Eu uso a mesma referência de navegação ou mesma navegação três. Então eu quero passar esta árvore de navegação para o meu cartão. Então eu vou aqui novamente para o meu cartão. Eu não tenho aqui cartões porque eu tenho uma lista e lista contém vários cartões como você se lembra. Então aqui eu preciso passar tão bem que a navegação como um adereço. Então eu vou definir um prop, chamá-lo de navegação nesse componente lista. Então eu vou aqui para o componente lista. Eu teria vários adereços e um desses prompts será chamado de navegação também. Então aqui Como você vai ver que estamos passando a árvore de navegação? Então, passando a árvore de navegação da tela inicial para os filhos e componente para usar a mesma referência. Caso contrário, saímos da Navegação 3 e isso nos causará alguns problemas. Então eu tenho aqui esse componente cartão que eu chamei anteriormente como você vê aqui. E então este componente de guarda também. Teremos uma propriedade chamada navegação. Então precisamos ir para o componente de cartão deles. E nos adereços, vou adicionar o prop de navegação. E dessa forma, quando eu tiver aqui o método que eu quero fazer na imprensa sobre opacidade tocável. Posso usar a navegação exatamente da mesma maneira que é feita aqui. Lembre-se, os três devem ser consistentes. Então é exatamente a maneira de manter a escuridão da navegação. Ok, vamos copiar este método agora e ir para o nosso componente de cartão. Em vez destes on-premise, podemos definir o método dessa forma. Então nós temos aqui esse método de navegação, que eu usei como uma referência, e então navegar para a cauda. Aqui não temos detalhes. Temos um componente de detalhe. Por que eu tenho detalhes? Porque na pilha eu defini um componente que é chamado ou navegação de tela, que é chamado detalhe. Portanto, temos aqui detalhes, mas também precisamos defini-lo como detalhe. Portanto, o nome aqui deve ser o mesmo nome da navegação para onde você vai navegar. Então eu tenho aqui detalhes, então eu devo ter em seu carrinho bem um detalhe. Então vamos guardar isso. Vamos salvar essa lista. É um lar seguro e salvar tudo. E então vamos para o aplicativo. E no aplicativo agora eu tenho todos os filmes. Eu não tenho nenhum erro. Então, quando eu clico em um deles, ok, Ele diz que indefinido não é um objeto. Isso aconteceu porque eu cliquei em algo que ainda não está indefinido. Então podemos ter, aqui temos algo como na tela inicial, temos várias listas. Se você se lembra, eu passei a navegação apenas para sua primeira lista. Portanto, precisamos passá-lo para todas as listas na biblioteca ou nos componentes da página inicial. Então temos lista, lista, várias listas. Nós salvamos tudo. Agora eu vou para esta lista, ok, nós vemos que nós mudamos para um detalhe de filme. Então, dessa forma, eu vou ser capaz de navegar para outra página usando como esta ferramenta de navegação. E agora temos a navegação desse detalhe. O que precisamos agora é apenas para estilizar este detalhe do filme e colocar um detalhe real do filme do componente do filme. E vamos precisar ver como podemos passar os dados do componente clicado ou clique em filme. Então eu cliquei neste filme, então eu quero ver o detalhe deste filme também. Então, dessa forma, precisamos enviar também alguns dados extras com a navegação, como veremos na próxima palestra. Então, como recapitulação, começamos a partir deste deck. Então eu vou recapitular como agora rapidamente. Temos que empilhar telas. Então temos um em casa, um é detalhe. E com os detalhes, precisamos fazer algo, então precisamos navegar até ele de alguma forma. Então, em nossa aplicação temos uma tela inicial inicial é será este. Então, no meu caso, eu quero clicar em um desses cartões. E este cartão é um componente que eu criei antes. Então eu vou para este componente cartão e eu vou dizer que o ponto de navegação navegar para detalhes. Mas neste caso, temos um problema de onde eu conseguiria essa navegação. Fizemos a navegação como um adereço porque precisamos passar a navegação, não diretamente como temos aqui na tela inicial e na documentação? Não, porque nós, quando queremos manter a pilha deles. Então eu criei um prop chamá-lo de navegação. E, em seguida, este da tela inicial usando o mesmo método como ele fez exatamente. Então, no próprio componente, eu defini a navegação e, em seguida, a navegação. Esta variável vamos chamá-la, é passada para a lista porque eu não tenho acesso ao carro deles diretamente aqui. Então eu estou enviando para a lista deles. E dentro da lista, eu defino uma propriedade que é chamada de navegação. E em sua navegação estão na própria lista. Eu tenho um cartão, e este cartão tem também propriedade é navegação. Então estou usando exatamente a mesma árvore de navegação. Você tem que ter cuidado com a coisa. Então, dessa forma, você não vai perder as referências porque às vezes vamos adicionar como ir para a tela inicial, ir para o topo, ou remover a árvore de navegação. Então isso é muito importante para você. No nosso caso, temos apenas detalhes de filmes. Vamos navegar até ele e ver os detalhes do filme. 41. Visão geral do filme: Ok, o que vamos fazer nesta seção, vamos ver os detalhes do filme. Se você se lembra, eu tenho uma demonstração em execução no meu aplicativo ou no meu simulador Android, e eu estou usando o simulador iOS. Mas agora se você quiser ver você lá detalhes do filme como o que vamos fazer no futuro ou nesta seção. Então, quando eu correr aqui ou quando eu clicar em um dos filmes, eu vou ver como uma imagem do filme. Vou ver aqui algum URL gostaria de voltar. E então eu vou ter um botão play. E também como o título eo que Jenner, este filme pertence a ou que categoria. E também teremos alguma classificação e também, teremos alguma descrição e data de lançamento. Todas essas informações virão da API de nossos filmes. Então, dessa forma, eu preciso passar esses dados de seu filme clicado para o componente de detalhes do filme como conversamos anteriormente. Então vamos começar a trabalhar com isso, e espero que você aproveite esta seção. 42. Passe dados de filme selecionados para a componente detalhes: Voltando ao nosso projeto, se você se lembra, paramos no final quando estávamos tentando navegar para o detalhe do filme, mas ainda não temos os dados. Então eu quero obter os dados do filme clicado. Quando eu clico neste filme, eu quero ver isso também. Então podemos ir aqui e também podemos ler a documentação da navegação React. Então, depois de nos movermos entre telas, temos algo chamado passagem de parâmetros para as rotas. Então passando parâmetros para a rota, como eu quero passar o filme que eu cliquei na página inicial e, em seguida, enviá-lo para o componente de detalhes do filme. Assim, dessa forma, poderei ler esses dados. Passar parâmetro é muito, muito fácil com a navegação nativa React. Então você só vai aqui e você pode ir para o local, como quando criamos o on-premise em nossa guarda, eu passo alguns dados como um segundo parâmetro desse método, sobre o qual falamos, que é chamado de navegar. Então, na verdade, quando eu ir para o meu aplicativo e ir para o componente de guarda, por exemplo vamos aqui, componente de guarda e temos definido aqui o evento clique ou compactar evento. Então aqui, depois que eu especificar o componente onde eu vou navegar para o campus também. Eu também posso passar alguns dados extras. Esses dados podem ser o item ou o filme que estou enviando para navegar até essa página. Então, desta forma, posso dar um nome para o nosso detalhe. Posso chamá-lo de detalhe de filme, por exemplo. Então podemos dizer detalhes do filme aqui. E o valor do detalhe do filme será o item em si, o item ou o filme que é passado para o detalhe do filme ou para o próprio carrinho. Agora estamos bem. Temos o componente do cartão e passamos pela navegação os dados, então tudo bem. Em detalhe componente, como podemos ler esses dados. A leitura dos dados na documentação é mencionada desta forma. Então você vai para a tela de detalhes que criamos, e então você passa rota ea navegação porque temos aqui esse componente detalhe como verde na pilha. Então, dessa forma, não posso dizer que posso usar uma rota. E também a rota de navegação é algo em você onde vamos obter os parâmetros. E como você vê, ele definiu uma constante. É exatamente como ele definiu aqui. Então ele passou o ID do item e também outros parâmetros. E então ele os recebeu exatamente com os mesmos nomes no fundo da rota. Dessa forma, posso ler também os fundos dos detalhes do filme e, em seguida, atribuí-los a alguma variável ou uma constante e ler essas variáveis ou esses backups. Então vamos para o nosso componente detalhado. E então, no componente detalhado, como vimos anteriormente, precisamos passar rota. E também a navegação, exatamente como ela é definida ou como ela é mostrada lá. Então, e então podemos definir uma constante, e chamamos isso de constante como detalhe de filme. Então, dessa forma, podemos dizer que o filme b del é parâmetros de ponto de rota. E o nome do componente ou do objeto que eu defini aqui, onde ele está segurando o detalhe do filme. Então, desta forma, eu era um detalhe de filme. Então aqui eu vou ter RouteParams ponto mais detalhes. Então, dessa forma, eu estou segurando o detalhe do filme nesta constante que eu defini aqui. Então, dessa forma, eu posso ver também quanto mais renomear que eu cliquei. Então, quando eu clicar neste filme, eu quero ver o nome desse filme. Assim, desta forma, podemos remover esta parte e dizer como ponto detalhe filme. Se você se lembrar do campo para o qual está segurando o nome do filme, nós chamá-lo, ou ele está na API chamado um título. Dessa forma, quando eu clicar neste filme, Eu vou ver que o título desse filme que eu cliquei em. Então aqui temos vários filmes e, por exemplo, eu tenho filmes familiares. Este é Luka, outro RIAA, e vários filmes. E é dinâmico para mim. Então, dessa forma, eu estou passando todos os dados dentro do meu componente do cartão que eu cliquei. Então o filme veio como um item, como um adereço para este guarda e, em seguida, é passado para eles detalhe do filme. E então, no detalhe, eu li os dados e eu fugi aqui. 43. Serviço de detalhes do filme: Ok, agora nesta palestra vamos usar o serviço de detalhes do filme. Ok, talvez você vai me dizer por que você tem que criar um serviço de detalhes de filmes. Por que você precisa pegar os dados do filme novamente, quando você já tem os dados definidos no detalhe do filme. Claro, a API como você vê aqui em nosso filme DBAPI. Ok, nós temos sorte que estamos recebendo quando temos a lista dos filmes, por exemplo, os filmes populares, Estamos recebendo todos os filmes de alguma forma desta maneira. Então nós entramos nos resultados, quanto mais nós reforçamos e adulto e gênero id viu desta forma, podemos ser conhecidos que temos dados suficientes. Mas se verificarmos os detalhes do filme, se formos aqui para lá, obter detalhes e veremos mais v, e então teremos esse detalhe do filme. Se formos a ele, veremos que temos mais detalhes. Não temos apenas gêneros iguais. Temos a identificação e o nome do jornalista. Assim, podemos, desta forma que podemos obter todas as informações, por exemplo, em detalhes, não apenas IDs. Então, primeiro de tudo, eu iria para os meus serviços e, em seguida, criar um novo serviço que será chamado get movie. Então só precisamos de detalhes do filme. Então, dessa forma, vamos copiar uma dessas APIs ou esses serviços e vamos renomeá-lo. Nós diremos para pegar filme. Aqui, passaremos a identificação do filme. Precisamos passar ID porque, como você vê aqui, nossa API está adquirindo um ID? Então, para conseguir um filme, eu preciso conseguir a identificação dele. Assim, desta forma, podemos ter a mesma API. Então eu vou colocar este como aqui. Podemos fazer um filme e depois livrarmo-nos de tudo isto. E teremos apenas assim. Então, teremos API URL, o URL básico filme barra e, em seguida, a chave API. E não precisamos disso com gêneros. Então, dessa forma, podemos economizar e teremos nosso serviço pronto. Mas os dados, não será com os resultados porque se verificarmos, essa resposta aqui, ele diz que nos dará diretamente um objeto contendo todos os dados. Então eu vou novamente, levou o meu serviço e eu vou dizer retorno diretamente, que é lagoas dados ponto. Além disso, se você sabe isso na minha API, como você vê aqui, que nós temos que passar o ID do filme. Então, se eu for aqui para o detalhe do filme, obter detalhes, eu tenho que passar através do ID do filme na URL ou na API. Então, desta forma, não é suficiente tê-lo assim. Precisamos passar também a identificação. Então, dessa forma, podemos ter aqui este método, e então eu posso dizer aqui barra. E então colocamos outro parâmetro ou outro parâmetro definido, que será a idéia que estou passando aqui. Ok, exatamente como fizemos antes com a página inicial, mais todos nós recebendo lista de filmes, se você se lembra, nós chamamos esse estado e então nós dissemos o estado do usuário e, em seguida, usar efeito. E então nós estávamos recebendo o serviço deles e, em seguida, definindo o resultado desse serviço dentro da minha constante ou as constantes do estado. Então faremos o mesmo. Primeiro de tudo, vou chamar como uma constante detalhada. Vou defini-lo aqui. Então, podemos ter aqui constante que é chamado detalhe, e então ele terá um conjunto detalhado também. E terá usado um estado. Então precisamos também importar o estado do usuário. Então, agora, depois disso, não precisamos mais desse detalhe do filme, mas vamos precisar do parâmetro é porque eu vou ter o ID do filme. Podemos dizer como em que fazer colocá-lo em cima e podemos dizer ID de filme. E então podemos passar no detalhe do filme também ponto ID. Porque se você se lembrar, temos em nossos parâmetros, possamos ir para a nossa API, que foi, por exemplo, fica popular. E eles ficaram populares. Nós temos nessa resposta ID, estamos recebendo ID de cada filme que estamos clicando em que guarda, não só seu nome ou seu Dido, nós podemos ter o ID também. Então, depois disso, também podemos usar esse ID de filme para obter os dados desse filme em detalhes usando nosso serviço. Então, dessa forma, precisamos usar também um efeito. Então dizemos usar efeito e este efeito enorme também, vamos importá-lo de reagir. Às vezes, é a integração automática. Você não precisa fazer isso. Então você só precisa corrigir a importação automaticamente para que você possa ter como importação mais consistente. Então use efeito. Ele tem uma função de callback e esta função de callback irá conter para mim que a capacidade de definir ou definir os valores constantes ou as variáveis de estado com o resultado desse sedimento. Então, como fizemos em casa, se você se lembra, estávamos recebendo esses dados então e então estávamos definindo os dados. Então, dessa forma, eu preciso importar meu serviço que eu criei antes. Então eu vou dizer pegar filme e então eu vou importar isso. Serviço, Eu vou dizer aqui, Importar, obter filme de. E então eu disse, o caminho que eu defini meus serviços. Então eu vou dizer talvez aqui, um passo para cima, serviços e, em seguida, serviços. Então, em obter filme, eu vou ter o meu detalhe de filme. Então aqui vamos dizer fica mais v. E então vamos passar o ID, que é ID do filme, como dissemos aqui. E então esta será uma promessa, como você se lembra. E assim eu vou dizer aqui, então, e neste então eu iria obter dados de filme. Então, dessa forma, eu terei um retorno de chamada. E dentro dos dados do filme, eu posso dizer set detalhe com os dados que estão vindo nessa resposta. Então eu vou dizer aqui disse detalhe, mais readapt. E, claro, para garantir que isso seja executado ilimitado de vezes, se você se lembrar para o vazamento de memória e desempenho, precisamos colocar isso em um array vazio. Então, nesse caso, não teremos nenhum problema para não ser executado ilimitado de vezes. Mas como você vê aqui, ES fiapos está reclamando dizendo que a identificação do filme não é conhecida. Então é como se você incluísse ou remova a dependência. Então, para resolver este problema e manter que estamos chamando este serviço apenas uma vez no efeito e não tem vazamento de memória, então nós só precisamos passar ID de filme aqui. Então, neste caso, você se livrará do erro ES fiapos. Então, dessa forma, eu vou ter o detalhe, ou podemos chamar isso de novo como detalhe de filme. Então, dessa forma, terei detalhes mais detalhados e set do filme. Então, para ter nomes mais consistentes. Então eu vou renomear isso para definir detalhes do filme e, em seguida, mais detalhes, eu posso usá-lo aqui. Então, nesse caso, vamos salvar, clique em um dos filmes. Como você vê, estamos recebendo um erro. Estamos dizendo que o indefinido é um objeto. Por exemplo, isso aconteceu porque os detalhes do filme ainda não estão prontos. Então, se você se lembra, nós usamos carregado. Então, depois de carregar os dados, então eu posso renderizar meu aplicativo ou minha página. Então, nesse caso, precisamos definir outra constante. Chamamos-lhe carregado e configurado carregado. Então, dessa forma, o caso padrão deste conjunto carregado ou eles são carregados será falso. Então, depois disso, eu posso dizer aqui que se carregado ou primeiro precisamos definir carregado. Porque aqui temos então, e então colocamos aqui conjunto carregado. E será verdade porque dissemos que os dados com sucesso. Todos nós temos os dados com sucesso. Então podemos ter aqui também e objeto, se você se lembra, dizemos carregado e então colocamos isso dentro desses suportes. E estamos garantindo que temos o estado carregado de nossa aplicação da maneira correta. Então vamos economizar agora e ir a um de nossos filmes. Então eu iria aqui e eu vou ver como, por exemplo, este aqui. E veremos que temos um erro. Está dizendo que o serviço padrão não é uma função. Eu estou cometendo este erro por propósito apenas para ter certeza de que você é, quando você está importando um serviço ou uma função ou uma constante, você vai precisar colocá-lo dentro dos colchetes de objeto quando você está indo para importar algo ou um serviço ou um método exatamente da mesma forma como o definimos porque temos constante e, em seguida, obter filme, e, em seguida, definimos o nosso método. Então, desta forma, você deve ter certeza de que você está usando esses colchetes. Depois disso, funcionará para você. Então agora temos aqui o nome do filme vindo exatamente como esperado, mas o nome do filme não vem da navegação, ele vem da API. Depois que ele foi carregado, assim por diante, o filme, O desafio, vamos começar primeiro a criar um ScrollView. Se você se lembra, nós estávamos usando a pontuação de ScrollView na página inicial também. Então eu vou fazer isso rápido. Então eu chamaria um ScrollView. E essa exibição de rolagem será importada do React Native. Então eu vou aqui dentro do fragmento, eu vou ter um ScrollView. E nesta visão de rolagem com vêm de React Native também. E nesta visão de rolagem, talvez possamos adicionar um pouco de estilo a ele ou podemos mantê-lo assim por enquanto. E dentro desta visão de rolagem. Então eu posso mover toda essa exibição de rolagem ou isso carregado para a exibição de rolagem em si. Então, dentro dele estará o texto. E aqui teremos se carregado e visão de rolagem, em seguida, colocar para mim o conteúdo. Então não podemos ter isso do jeito certo. Então eu só preciso fechar esse objeto e depois salvar. Certo, já carregamos. E, em seguida, dentro do ScrollView, por enquanto, eu não preciso de um texto. Preciso da imagem, se você se lembra. Então eu vou substituir isso por imagem e este componente de imagem. Podemos importá-lo de React Native também. Então podemos dizer aqui imagem e, em seguida, esta imagem terá como algumas propriedades. Então, se você se lembra, usamos o componente de imagem em nossa guarda. Em nossa guarda, definimos todas essas propriedades. Então eu não preciso repeti-los novamente. Então podemos usar todas essas propriedades. Posso copiar toda esta imagem. Só precisamos substituir alguns parâmetros. Então eu vou dizer aqui imagem. E então precisamos substituir como, por exemplo, modo de redimensionamento é bom. Style, ok, precisamos adicionar estilos para isso. Então vamos copiar os mesmos estilos. Então podemos copiar todos esses estilos, exceto como algumas aulas. Então eu coloquei aqui a folha de estilo constante, precisamos importá-la. Novamente. Tudo é exatamente como estávamos antes, então não preciso explicar de novo. Então podemos ter aqui a aula de imagem e podemos nos livrar de todos esses óculos. Então, dessa forma, não precisamos ter um item, mas não teríamos o detalhe do filme. Então, no detalhe do filme, ponto caminho cartaz e, em seguida, o fígado há caminho cartaz detalhado filme. Em seguida, exibir, caso contrário, exibir a imagem do suporte do local. Não temos a imagem do titular do lugar. Então, nesse caso, eu também preciso copiá-lo. Então, podemos definir uma constante, chamá-lo de imagem titular lugar, e então podemos usá-lo também aqui. Então eu vou ter aqui colocar imagem titular, e nesse caso, nossa aplicação vai funcionar bem. Então temos a imagem de espaço reservado, temos imagem, e depois disso embaixo, talvez possamos colocar a descrição do filme. Então vamos primeiro tentar isso. Se trabalharmos bem, todos vocês estão trabalhando bem. Então eu vou colocar aqui, ok, O estilo parece feio porque estamos usando o estilo de seu cartão. Então, para ter um estilo mais adequado, podemos dar altura como algo como se pudéssemos mantê-lo 100 e remover esta largura e mais deste raio de fronteira. Então, nesse caso, teremos a imagem assim. Ou se você quiser usar alguma porcentagem específica da tela ou do tamanho do celular ou da tela do celular. Então você também pode usar as dimensões que conversamos antes. Então, primeiro de tudo, eu preciso importar as dimensões do React Native também. Então aqui em React Native importações, podemos dizer importar para mim a dimensão, e então podemos definir constante. Chamamos-lhe altura. E esta altura terá dimensões ponto obter. Se você se lembra, exatamente da mesma maneira que podemos dizer a altura do ponto da tela. Então ele pode nos dar com alto detalhe tudo. Então precisamos apenas da altura. Então, dessa forma, posso dizer que o tamanho da imagem será a altura dividida por, por exemplo, metade ou dividir por dois, podemos dizer. Então, dessa forma, terá a metade deste verde aqui. Então, isso é bom. Acho que é o suficiente, ou talvez você possa colocá-lo mais baixo. Você pode 2.5 para ter apenas como algum tamanho para ter mais espaço para usar e exibir as informações do filme. Além disso, antes de terminar esta palestra, podemos também exibir como se não estiver carregado, podemos exibir como indicador de atividade, como um indicador de carga como vimos antes. Então, podemos dizer, se não carregado, então exibir o indicador de atividade em uma tela maior. Então precisamos importar também o indicador de atividade, como expliquei anteriormente na palestra quando estávamos carregando a tela da página inicial. Então, dessa forma, vamos para o nosso simulador. E quando eu voltar e ir a um dos filmes, e então eu vou começar como carregar porque eu tenho conexão rápida. Então eu não estou entendendo, eu não estou vendo este indicador de carga. Desse modo. Você verá um indicador de carregamento se você tiver uma conexão lenta. Então o benefício que temos aqui na verdade que estamos passando os dados da navegação para o filme detalhado. Dessa forma, não precisamos desse guarda para passar todos os dados do filme porque precisamos apenas passar o ID do filme. Então eu não posso ver aqui no cartão simplesmente que eu quero passar apenas ID do filme e, em seguida, não todos os dados do filme que obtivemos a partir da API. Porque como você se lembra que o filme ou o item aqui, ele está contendo algumas informações sobre o filme, mas não todos os detalhes. Quero dizer, aqueles que vemos no filme popular para o exemplo, nós temos na API, como todas essas informações. Não, eu preciso passar para a próxima tela apenas o ID, porque novamente, estou criando uma chamada de API nos detalhes limpos para obter um detalhe de filme. Então, dessa forma, eu vou dizer ID do filme e, em seguida, passou para mim o ID do ponto do item. Então, nada de especial. Estamos apenas passando a identificação do filme, nem todo o filme para a próxima tela. Então, quando eu clicar em um cartão, então eu vou para a tela de detalhes e, em seguida, eu recebo não mais detalhes nós. Eu vou receber ID de filme, exatamente o mesmo nome que eu especifiquei aqui. Então eu tenho aqui ID filme, em seguida, no detalhe que eu vou receber também do ID do filme params. Então, quando formos para isso ou mutador e tentarmos de novo, bem, ainda estamos bem e tudo está funcionando. Assim, desta forma, a navegação será rápida porque estamos passando apenas o ID. Não vou passar todos os dados novamente para a próxima tela. Isso é muito importante para você fazer exatamente quando você está desenvolvendo aplicativo móvel para não passar um big data ou grande quantidade de dados entre as telas. 44. Title e Genres: Então agora vamos fazer o título do filme e os gêneros. Então, desta forma, precisamos criar um componente de texto como fizemos antes. Então precisamos ter aqui o componente x e precisamos importá-lo também. Então eu vou aqui para o texto e, em seguida, eu vou importar este componente de texto. E neste caso precisamos também do para colocar alguns dados dentro dele. Então eu vou dizer aqui esta peça para mim o detalhe do filme, esse título. Então vamos fazer isso e depois testado. Então, vamos para os filmes populares no Clique nele. Ok, nós temos o título aqui, mas o título é pequeno, então precisamos torná-lo maior. Então precisamos dar um pouco de estilo. Então eu vou dizer aqui para o estilo. E então vou definir um objeto. E esse estilo terá um nome. Podemos dizer “Styles Dot”. Podemos dar um nome como título de filme. E desta forma temos que criar novamente a classe que é chamado de título do filme. Eu daria fórum para ele como algum tamanho de fonte pode ser 24. Então podemos dizer aqui 24. E então aqui eu tenho que colocar os dois pontos ou o tamanho da fonte. Pode ser 24. E também, podemos colocar o peso da fonte, podemos torná-lo careca. Então podemos ouvir algo como careca. E também, podemos adicionar algumas margens e preenchimento. Então eu vou dizer margem superior. Podemos colocar aqui margem superior, será 10. E margem inferior, gostaria de empurrar o conteúdo sob ele para ser como novamente 10. Então salvamos, ok, Nice. Temos tudo bem. Mas precisamos centralizá-lo. Mas vamos centralizar tudo como se pudéssemos centralizar todo o conteúdo. Então eu vou dar uma aula para a visão de rolagem. Então eu dou um estilo. E neste estilo vou definir exatamente da mesma maneira como estávamos fazendo com seus contêineres. Então, eu diria estilos recipiente ponto. E esse contêiner, tudo estaria centralizado. Então podemos copiar a mesma coisa que temos aqui, flexionar um centro de conteúdo justificativo, alinhar o centro de itens. Então nós iríamos aqui e, em seguida, vamos colocar o vidro, ou podemos dizer aqui recipiente. E este recipiente para ser um objeto. E eu vou colocar este mostrador dentro dele. E não esquecerei a vírgula. Mas como você vê aqui, estamos recebendo um erro. Ele diz que o layout filho ScrollView, como devemos ser aplicados através do recipiente de conteúdo. Então precisamos colocar tudo como algo dentro de você. Então podemos chamar aqui uma visão e podemos envolver todo o texto dentro ou todo o conteúdo que vamos fazer aqui dentro dessa visão. E, em seguida, fazendo este mostrador desta vista, vamos dar o recipiente. Então precisamos remover isso daqui e colá-lo no tipo, na visão em si. É por isso que estou usando uma vista. Então, você sabe o motivo porque você não pode colocá-lo para ScrollView, como você vê aqui que temos esse erro. Então vamos importar a vista e, em seguida, salvamos. E novamente ir a algum filme. Ok, agora temos o título do filme no meio e há margens de preenchimento, margem superior abaixo. Agora vamos trabalhar com jornalistas. Então, se você se lembra, temos para o filme um pouco generoso. Então todos eles vêm com o filme em si. Então precisamos ver como podemos pegá-los. Então, como você vê aqui temos na API, Eu vou para obter detalhes API. E você pode ver que são lagoas diretamente aqui. Você não precisa usar o Postman, por exemplo, você pode usar aqui a resposta na documentação, esta API. Então o generoso será novamente como algum array. E esta matriz tem ID e nome. Então o que eu preciso é apenas o nome. Então, nesse caso, podemos ir para o nosso código e criar uma matriz de generoso e, em seguida, loop em algum texto e exibir todo o generoso. Então vamos criar uma vista em, novamente dentro dessa visão. Então dizemos aqui de u e b tem que ter certeza de que temos generoso porque alguns filmes não têm. Então eu posso fazer isso. É quando eu digo como eu abri um objeto, então eu posso obter detalhes do filme, exatamente como nós fizemos antes. E o nome do campo para generoso, o nome do campo é jornalistas, como você vê aqui. Então primeiro, eu preciso verificar se eu sou realmente generoso porque alguns filmes não têm. E então eu posso exibir a vista. Então, desta forma, vou colocar a vista dentro desses suportes. Então é exatamente como um “se”. E dentro da visão em si, vamos fazer um loop sobre o jornalista e fazer um componente de texto. Então eu vou ter aqui no componente de texto, Vamos alinhar isso aqui para estar na mesma linha. E então dentro deste texto, eu quero fazer loop e exibir todos os generalistas porque alguns mais nós, eles têm três categorias, alguns mais visualização, eles têm cinco, alguns filmes que eles precisam. Então, dessa forma, eu preciso fazer um loop sobre eles. Então, como podemos fazer um loop? Então, na vista em si, posso abrir novamente um suporte. Então dentro dele eu posso escrever JavaScript. Então, como você vê, podemos escrever JavaScript dentro do modelo. Então este é o objetivo desta palestra. Quero mostrar-lhe como escrever JavaScript dentro, como o modelo desses componentes nativos React. Então podemos dizer aqui, como loop over jornalistas. Então eu posso colocar aqui generoso e depois mapear. Então, com este mapa, é como, você sabe, esse mapa está looping sobre todos os membros. Então eu diria aqui, e este mapa, ele vai retornar para mim como único ou item por item. E então eu posso usar isso para envolver o texto do componente nele. Então, dessa forma, eu vou voltar não só como seu gênero e o que eu vou fazer dentro dele. Então eu retornarei um componente, e este componente será o texto. Então eu vou colocar aqui retornar e então eu vou dizer que o texto em, desta forma aqui, que janeiro, eu posso exibir o nome dele porque eu estou em loop um por um sobre ele. Então, como você vê aqui, é ciumento. Estou fazendo loop sobre eles porque é array e eu tenho o nome de todos os sexos aqui. Então podemos ir e verificar nossa aplicação se tudo está funcionando bem. Legal. Tenho aqui toda a informação. Então este filme você luca, tem animação, comédia, família, categorias de fantasia. Mas aqui temos um nó que diz, como cada criança em Alice deve ter um único, dizer o que é? Prop de chave única. Isso é porque temos aqui como um texto e estamos fazendo loop várias vezes. Então eu preciso especificar uma propriedade chave. A propriedade chave deve ser única. Então, a única coisa que podemos usar nesse caso, que obtemos a identificação do janeiro. Então podemos dizer aqui que a chave pode ser não apenas como qualquer número, podemos dizer gênero, como o mesmo, que usamos ponto ID. Então, nesse caso, teremos essa arma de notificação e o texto, ou cada texto tem uma chave única. Então, através do mapa, eu loop sobre os gêneros e, em seguida, eu tê-los como exibido como um texto. Mas aqui, como você vê, eles estão listados um sob o outro. Queremos exibir um ao lado do outro, exibi-los perto do outro. Então, para isso, podemos dar estilo para esta visão. Então, também podemos usar como estilo e dar-lhe como alguma visão específica. Então não podemos dizer aqui em vez de estilo diário, podemos dizer jornalistas contêiner. Então, nesse caso, podemos dar uma aula com esse nome. Vou aqui definir essa classe. E será como um objeto também. E para torná-los próximos uns dos outros porque estamos usando flex. Então eu não posso dizer direção flexível. Se você sabe em CSS, eu posso colocar algo chamado um papel. E também para alinhamento, posso dizer alinhar conteúdo ou alinhar itens. Podemos dizer “centro”. Desta forma, eles verão isso ou eles vão parecer que eles estão próximos um do outro. Mas como você vê o artista se esquivando um ao outro. Então precisamos criar alguns espaços entre eles. Então, novamente, eu preciso dar um estilo para este item de texto dentro da matriz. Então podemos dizer como apenas estilo gênero. Então podemos dar uma aula. E esta turma será localizada aqui. E então seria um objeto. E eu posso dar alguma margem, direita, margem esquerda. Assim margem direita, será, por exemplo, podemos dar-lhe dez. Então vamos tentar isso, ok, como você vê aqui, nós temos todos eles empurrados para longe um do outro. Claro, você pode adicionar mais estilos. Precisamos alcançar exatamente o mesmo estilo que podemos dar também. Como alguns font-weight também podem ser murados, para que possa ser mais agradável. Então eu vou dar-lhe um peso de fonte negrito. E vamos empurrar o contêiner um pouco do topo, como cerca de 20 pixels para ter mais espaço para o título. Então eu vou dar aqui minha margem superior, vamos dar como 20. Então, neste caso, terei o seu generoso e o título do filme exatamente como explicamos aqui. 45. Componente de avaliação com estrela de filmes: Outra informação também que precisamos para o nosso detalhe de filme é a classificação de estrelas. Como quanto esse filme é avaliado? Se formos para a API, veremos vários campos para obter o detalhe do filme. E um desses campos é a média de votos, e também há uma contagem de votos. Então, o campo da média de votos está me dando a classificação da crítica comum sobre este filme. Então, por exemplo, vamos criar um componente de texto e imprimir esse valor. Vamos para o nosso código e vamos criar outros componentes de texto. Então temos aqui a visão que terminamos com ele. Então, sob isso, podemos criar outro componente de texto. Claro que vamos removê-lo. É só para um teste. Então eu vou dizer aqui, basta imprimir para mim detalhes do filme Dot o que temos aqui, a média de votos. Então podemos ter, dessa forma, o filme é a média do filme. Então, como você vê aqui, nós temos o 8.38.3 de dez porque eles são classificação ou média de filmes é avaliado de 10. Mas queremos usar um componente de classificação por estrelas. Componente de classificação de estrelas terá um cinco estrelas. Dessa forma, eu posso dividir isso por dois, então eu posso obter o valor de cinco. Então precisamos de um componente de classificação estelar. Então, onde podemos encontrar isso. Infelizmente no React Native, não há nenhum componente de classificação de estrelas como construído com o nativo. Mas podemos encontrar um se você quiser encontrar componente de classificação de estrelas, apenas Google, e então você vai encontrá-lo facilmente. Para mim, eu estou usando um que é chamado React Native classificação estrelas. Então nós apenas colocar este e eu vou encontrar no pacote NPM algo chamado React Native star rating. Então vamos para ele e veremos essa documentação desta classificação. Claro, este componente, um monte de propriedades exatamente como vimos com outros componentes que usamos anteriormente. E aqui um exemplo de usá-lo. Ele diz que apenas importa classificação estrela seca e dizer desativado gostam de não torná-lo como entrada para que você não pode clicar nele porque é apenas valor de apresentação e maxes estrelas, você pode definir tanto quanto você quer estrelas e classificação e, em seguida, o valor da classificação que concordamos. E também como estrelas selecionadas, quando você está clicando no início ou na classificação. Então vamos instalar este componente. Primeiro de tudo, precisamos ir e ver como podemos instalá-lo. A instalação é apenas npm instalar Reagir classificação estrela nativa. Então nós podemos ir aqui para o nosso código, abrir o terminal, e então nós vamos para a guia terminal, e então vamos colar o comando aqui. Então, dessa forma, instalamos a biblioteca de classificação de estrelas React Native. Poderemos importá-lo e usá-lo em nosso aplicativo. Então, a maneira de importar este componente, como você sabe, sempre, nós somos, por exemplo, vemos os exemplos. Então aqui importar classificação de estrelas porque é uma classe de Reagir classificação de estrelas nativo. Então podemos ir aqui para o nosso componente. Vamos fechar o terminal porque acabamos com ele. Então aqui eu vou dizer, OK, importar para mim classificação de estrelas de Reagir classificação nativa estrelas. E aqui eu posso usar esse componente. Então, em vez do texto, podemos colocar classificação de estrelas, e aqui teremos uma estrela, certo? Então, uma das propriedades que precisamos é o máximo de estrelas e o valor de classificação. Então, vamos levá-los. Nós podemos ouvir ir e dizer como nós removemos esta parte porque é um componente lateral para que possamos ter algo como isso. Não temos que fechá-la de novo. Assim, podemos ter as estrelas do Max. É exatamente, ele tem auto-completar para que possamos vê-lo. Serão cinco. E também, precisamos ter o valor da classificação. Assim, a classificação será a mesma classificação que definimos antes. Então, será detalhe do filme, porém, média de votos. Então, dessa forma, eu terei sua classificação neste valor. Mas como dissemos antes, o valor é 10, então vou dividi-lo por dois. Então vamos guardar isso. E então nosso aplicativo será carregado. E quem cometeria algum erro é algo chamado família de forma não reconhecida. Fonte impressionante. Isso ocorre porque esta biblioteca está usando Font Awesome ou ícones de fonte. Assim, desta forma, não poderemos usar esta biblioteca até que instalemos outras dependências, como vemos na documentação. Mas se você quiser remover esta seta, você pode colocar esta falha. E tudo que você pode salvar novamente para remover esse erro, ok, Mas o erro ainda em segundo plano e no terminal, mas ele mostra a realidade do problema. Como você vê aqui. Ok, Temos quatro estrelas, mas o problema que as estrelas não estão aparecendo porque não há nenhum ícone. E como você vê se você vai para a documentação, eles dizem que após a instalação você precisa vincular a uma biblioteca que é chamado React Native Victor ícone. Então, desta forma, precisamos nos referir a este ícone ou guia de biblioteca de ícones Richter. Então, às vezes, os componentes dependem de outros componentes. Então, dessa forma, você precisa sempre instalar essas bibliotecas e ser capaz de usá-las. instalação dos ícones precisa de um pouco de trabalho. Então eu vou fazer isso em uma palestra separada. 46. Como usar ícones no React Native: Ok, Então, na última palestra, paramos aqui onde temos um erro porque não podemos carregar a fonte ou os ícones que queremos. Então, como você vê aqui, vemos apenas pontos de interrogação. Nós dissemos que esta biblioteca entre instalado sobre classificação de estrelas é dependendo de outra biblioteca, que é chamado Reagir ícones nativos ou Reagir ícones nativos Victor. De React Native 0.6. Você só pode executar este comentário e você está pronto. Você não precisa fazer mais nada só se alguns problemas aparecerem para você, o que eu mencionarei nesta palestra. Porque nesta biblioteca, como dissemos aqui, temos várias etapas para instalá-la. Mas isso funciona com React Native com menos de 0,6. Então, se você tiver o React Native menor que 0,6, siga estas instruções. Caso contrário, é o suficiente para fazer npm instalar e instalar camada pronto e, em seguida, reiniciar o aplicativo e tudo funcionaria bem. Eu tenho este link exatamente da biblioteca de classificação de estrelas, como eu disse antes. Então Reagir nativo, ícones Victor, este é o nome da biblioteca e aqui há guia de instalação sobre ele. Então vamos novamente aqui para o nosso terminal e colar este comentário. Queremos instalar esta biblioteca que é chamado Reagir ícones vetoriais nativos. Assim, desta forma, a classificação por estrelas nos mostrará os ícones da maneira certa. Então, aqui a instalação está feita. Ok, quando eu salvar, eu ainda terei o erro no meu aplicativo. Eu ainda não veria ou ainda recebendo esse erro. E eu não posso ver os ícones isso porque você precisa reiniciar o aplicativo. Então, desta forma, temos que reiniciar, ir para o metrô e depois temos que encerrá-lo porque este terminal é aberto automaticamente. Por isso, temos de acabar com tudo. E depois mantemos, é claro, o simulador, sem problema. Vamos ver as ações ligadas a partir do Metro. E então vamos começar nossa inscrição novamente. Desta forma, ele será carregado novamente com a dependência certa, com as bibliotecas certas. E vamos ver os ícones novamente aqui, exatamente nesta página. Ok, então agora meu aplicativo Guthrie começou. Eu abri um novo metrô. Assim, eu posso ir ao meu cinema e clicar em um desses filmes. Claro, talvez tenhamos o erro novamente porque eu quero mostrar-lhe se você receber o erro novamente o que fazer. Então, normalmente, para alguns dispositivos, ele funcionará, mas aqui às vezes o erro ainda aparecerá. Isso porque você tem que fazer algo mais que é exigido de você. Há um comentário na documentação que você terá que fazer, que é chamado Reagir link nativo Reagir ícones Victor nativos. Embora desta forma, você será capaz de vincular React Native com esta biblioteca. Então, dessa forma, você sempre pode vincular sua biblioteca iOS e também no projeto iOS e também o projeto Android para essa biblioteca. Então, somente quando você receber esse erro, então você pode usar esse comando. Então eu vou aqui e colá-lo. E depois disso, você verá que a biblioteca de lei ficou vinculada, mas ainda não vemos o ícone porque precisamos novamente reiniciar o aplicativo. Então isso, quando aconteceu com você, então você tem que ir com esta opção que é chamada Reagir link nativo, e então usar este comentário. Você deve executar esse comando no mesmo caminho do seu aplicativo. Então eu estou aqui no aplicativo de filme e eu estou executando esse comando que eu mencionei para você, reagir link nativo, Reagir ícones nativos Victor. Então, dessa forma, precisamos reiniciar o aplicativo novamente. Então eu irei e terminarei o terminal. E então eu vou dizer aqui, Reagir nativo, executar iOS ou Android é depender do que você está usando. Perfeito aqui agora meu aplicativo está sendo executado. Quero verificar se já existem estrelas. Eu iria a um dos filmes. - Legal. Já temos as estrelas aqui. Mas eles são como grandes e eles são como esse estilo, bem, e há como eles são clicáveis. Então, para isso, vamos adicionar algumas propriedades. Algumas dessas propriedades que são mencionadas na documentação dessa biblioteca, que usamos para a classificação de estrelas React Native. Um deles é chamado de desabilitado. Assim, podemos também desativar todos esses ícones são todas estrelas. Então eu posso colocar aqui propriedade deficiente. E com esta propriedade desativada, posso configurá-la como verdadeira. Então podemos dizer “deficiente”. E então definimos isso como verdadeiro. Desta forma, as estrelas serão desativadas. Então eu vou aqui e vamos ver se eles estão desativados. Essa é também uma outra propriedade que é chamada de cor de estrela completa. Você pode escolher a cor. Então eu também posso usar esta propriedade. Então eu posso colocar aqui para esta cor escura e podemos colocar uma cor especial como uma cor CSS. Então eu escolheria ouro. Assim, desta forma, vou ver que a cor está mudando para ser ouro, como você vê aqui. Além disso, as estrelas são bem grandes, então talvez eu possa torná-las menores. Então podemos ter alguma propriedade que é chamado de tamanho de estrela. Este tamanho de estrela, podemos dar um tamanho em pixels. Então eu vou colocar aqui o tamanho da estrela, e eu vou colocar, por exemplo, 30. Vamos verificar a aplicação. Ok, agora nós começamos assim. Isso é muito bom. Então agora cada filme tem sua própria classificação, como você vê aqui. Então não temos nada aqui. Às vezes, não há classificação. Às vezes tem uma classificação aqui. Então nós temos toda a classificação, mas vamos criar algum espaço para que possamos empurrar o conteúdo dessas tags abaixo. Então, podemos ir para o onde temos os jornalistas e podemos adicionar ou podemos recipiente colocar botão de preenchimento ou margin-bottom. Então nós podemos colocar aqui margem inferior, e nós dar-lhe 20. E então vamos empurrar esse conteúdo para que, dessa forma. Claro, esta biblioteca, que é chamada Biblioteca de Ícones, ou podemos dizer ícones, ícones vetoriais. Ele também tem um monte de propriedades. Podemos usar um componente que é chamado Ícone. E atribuindo o nome do ícone, como veremos mais tarde, você pode especificar, exibir algum ícone em seu aplicativo. Então vamos ver mais tarde quando precisamos de um ícone, Vou mostrar-lhe como obter um ícone componente e usá-lo no aplicativo. 47. Descrição do filme e data para lançamento: Ok, vamos adicionar nesta palestra alguns como a data de lançamento e também alguma descrição do filme. Se verificarmos novamente a API da documentação onde temos o banco de dados de filmes, temos alguns campos que são como, por exemplo, importantes para nós para exibir algumas informações sobre o filme. Por exemplo, teremos algo chamado Visão Geral. Será como uma string onde terá uma visão geral sobre o filme. E também há algumas informações como nós podemos fornecê-lo para o usuário sobre a data de lançamento deste filme ou este programa de TV. Então, podemos adicioná-los facilmente perda ou podemos fazer algo como após a classificação de estrelas, podemos adicionar dois campos de texto. Um será para a data de lançamento e o outro será também para a descrição. Assim, desta forma, terei dois textos. Então, um desses textos vai conter para mim o detalhe do filme. E então eu copio o campo que eu tenho ou sou responsável pela descrição. Então eu vou colocar aqui visão geral. Então este vai mostrar para mim a visão geral sobre o filme. E também teremos outro que contenha a data de lançamento. Então eu posso usar aqui, bem como string, podemos dizer data de lançamento. E então podemos colocar como aqui algum espaço. E depois da citação, podemos colocar uma explosão como se pudéssemos adicionar outro texto ou que será um valioso. Então eu usaria mais detalhes e então eu vou desperdiçar ou eu vou ter aqui a data de lançamento. Então, a data de lançamento que eu tenho também da API, como vimos aqui. Então temos aqui a data de lançamento. Então, nesse caso, vamos salvar e veremos todas as informações. Então vamos fazer um pouco de estilo sobre esses textos. Então eu vou ter aqui como, bem como estilo. Então o estilo será o mesmo que fizemos aqui. Então, vamos dar uma aula e vamos dizer aqui como visão geral em também aqui nós daríamos como algo chamado data de lançamento. Podemos dizer aqui, liberar, então apenas liberado como uma classe. E então podemos especificar essas classes em nossa folha de estilo. Então eu iria para baixo e eu vou dizer que eu tenho uma classe nova que é chamado visão geral. E esta visão geral, Eu vou dar como uma margem e preenchimento de cima e para baixo sobre as estrelas comentários e também para a data de lançamento. Então eu vou dizer aqui margem inferior será como, por exemplo, 15. E também margem superior será 15 também. Você pode colocar os valores Qualquer que você quiser. Só estou mostrando aqui como se tivéssemos um curso educacional. Então, como você vê, estamos colocando o conteúdo nas bordas do telefone. Então precisamos dar algum espaço para que você possa dar um espaçamento usando estofamento. Então, dessa forma, eu posso remover, ou, por exemplo, eu posso dizer como me dar preenchimento, esquerda, preenchimento direito. Mas posso removê-los também. E eu posso dizer para me dar apenas batendo de quatro patas além disso, como eu posso dizer aqui de cima, direita, esquerda e baixo. Então eu posso dizer, dê-me um preenchimento que será de 15 pixels. Então, ele irá empurrar o conteúdo de cima, conteúdo de baixo, e também dos lados. E última coisa que podemos dar data de lançamento, que será como um ousado podemos dar-lhe uma cor ousada. Eu diria liberar, e então eu vou ter uma nova classe, ou poderia ser chamado de liberação. E este lançamento seria objeto e eu vou dizer font-weight será com um valor chamado careca. Assim, dessa forma, teremos a data de lançamento desta forma ou desta maneira agradável. Ok, agora, como você vê aqui, nós temos a data formatada de alguma forma de forma feia como não discutir, mas a formatação padrão do banco de dados, nós precisamos formatar a data com base em alguns, por exemplo, em seu país. Por exemplo, no meu país, na Europa, eles colocam o dia em primeiro lugar e depois a matemática, e depois disso eles colocam o ano. Então, não assim. Então eu quero formatar o dia de alguma forma, o que é adequado para o meu país. Para isso, precisamos instalar uma biblioteca que é o formato de data meta. Então eu vou voltar para o meu terminal e eu vou dizer npm instalado. E o nome da biblioteca é chamado de formato de data. E com este formato de data, eu posso colocá-lo salvar, e eu posso instalar esta biblioteca e usá-lo também no meu código nativo React. Então, após a instalação da biblioteca, eu posso dizer importar para mim uma função dessa biblioteca que é chamado de formato de data. Então eu posso dizer formato de data de importação a partir do formato de data. Depois disso, eu posso usar esta biblioteca facilmente como uma função, dizendo-o dessa forma. Então vamos fechar o terminal. Podemos ir para baixo e, em seguida, dizer aqui que eu vou chamar esta função que é chamado de formato de data. E eles formatam, como você vê, ele está me dizendo para fornecer uma data como uma string e, em seguida, mascarar ou o formato. Então, dessa forma, podemos saber o que é uma máscara da documentação desta biblioteca. Então eu iria aqui para o Google e eu o colocar o formato de data Reagir biblioteca nativa ou formato de data MPM. E desta forma eu posso encontrar uma biblioteca que é chamado de formato de data. E este que estou usando. E veremos a documentação deste formato de data. Então, como você vê, há várias formas de formatar suas datas. Então, dessa forma, você pode escolher o formato adequado para você. Então, por exemplo, eu quero ter algo como, como você vê aqui, ele diz aqui se você colocar quatro M, então ele vai dar-lhe o mês como seu nome completo. Se você colocar YOy, ele vai lhe dar o ano. Por favor, seja representado por quatro dígitos. Então, dessa forma, eu posso escolher um formato que eu gosto. Então você pode ler a documentação e verificar o formato para mim. O formato que eu gosto é um. Então vamos aqui e vamos para o seu formato como o segundo parâmetro desta função. E eu vou dizer aqui vírgula. E então eu vou colocar aspas como string, e então eu usaria esse formato. Isso me dará o nome do mês totalmente, e então me daria como o dia 17 de junho, por exemplo, 2021. Claro que você tem como, por exemplo, se eu colocar aqui D, D como, então eu teria 17 de junho de 2021. Então exatamente como você pode implementá-lo aqui. Então você pode copiar o que quiser. Você vai precisar de horas, você precisa apenas um mês ordenado, por exemplo, que eles, você pode obter o que você quer através desta biblioteca. Então, para mim, este, este formato que eu mais gosto para o meu aplicativo, e é mais compreensível para os usuários. Então eu posso usar esse formato. Assim, aprendemos aqui como formatar uma data e como adicionar mais informações sobre o filme. Então, desta forma, vamos implementar a próxima sobre um filme de botão de reprodução, onde podemos reproduzir o filme em algum diálogo ou em algum modelo. E podemos ver o vídeo do filme. 48. Botão de reprodução no filme: Ok, agora nesta palestra vamos ter um botão de jogo aqui. Claro que não será funcional porque precisamos de um modelo, precisamos de um vídeo. Mas vamos criar um componente onde ele reproduz um botão de reprodução aqui. Assim, ele pode ser clicável para o usuário. Então ele pode ser capaz de clicar sobre ele para ver o vídeo do filme. Então eu gosto sempre é claro que podemos usar opacidade tocável ou reprimível, como vimos antes, mas também, podemos criar nosso próprio componente, não temos tanto código aqui. Então, é claro, você sempre pode manter todo esse conteúdo dentro de alguns componentes, mas também, você não pode fornecê-los aqui. Por agora. Vou criar um componente, especialmente apenas para o botão Reproduzir. Então, neste caso, eu vou ter aqui como um recipiente como vemos. Então teremos aqui outra visão. E essa visão vai segurar para mim meu componente, aquele componente que eu disse que não podemos chamá-lo de botões de lâmina, por exemplo. E este botão Play, eu vou criá-lo. Então não é, algo existe em React Native é algo que vamos criar. Então, para criar um componente, como sempre, basta clicar em nossos componentes de pasta para que você possa colocá-lo em qualquer lugar, mas eu prefiro tê-lo em componentes. Vou criar um arquivo, chamá-lo de botão de reprodução. E este botão Play, NodeJS, eu criaria um componente puro. Criando um componente puro, como fizemos sempre usando B, C, S como classe componente puro. Então, nesse caso, teremos o componente butilo foi criado e também, precisamos importar React Native. Então podemos dizer IMR, então podemos dizer importação Reagir. E depois disso temos que dizer React.com porque é componente puro vem de reagir. Então, precisamos estender nosso componente de Reagir ponto puro componente. Então vamos remover agora o estado. E então precisamos aqui em troca de algum modelo. O modelo que vamos usar é a opacidade tocável como usamos com o cartão, se você lembrar, ou podemos usar algo mais ou mais moderno, que é chamado de princípio. Este princípio está em U, como você vê aqui na versão mais recente dos componentes em React Native, podemos usá-lo e ele tem um monte de funcionalidade como na imprensa dentro, na imprensa para fora e em pressão mais longa e como no peito para a esquerda, peito para o Certo. Então ele tem muita funcionalidade sobre essa opacidade tocável. Então, nesse caso, podemos dar uma olhada e usá-lo para ter várias variantes componente neste curso. Então, como podemos usá-lo, nós só precisamos importá-lo de React Native. Então eu vou importar o componente que é chamado de repressão. Tem de ter a certeza de que está a utilizar o React Native 0.6 e superior. Então, nesse caso, você será capaz de tê-lo. Então eu vou colocar aqui Importar e, em seguida, precedente, ou podemos tê-lo como um objeto de. E vamos colocar a biblioteca nativa do React. Assim, dessa forma, teremos precedentes importantes. É exatamente como a opacidade tocável. Você, como você vê aqui, nós usamos isso anteriormente, mas eles estão dizendo como se você está procurando maneira mais extensa e à prova de futuro para lidar com o toque com base na entrada, verifique sua ABI Então eles estão recomendando usar este componente. Então, dessa forma, eu posso pegar todo esse conteúdo. Então aqui temos um exemplo. Podemos copiar todo esse conteúdo e, em seguida, podemos colocá-lo em nosso código, como em seu retorno. E depois disso, é claro, precisamos importar o texto. Então, só precisamos dar uma olhada. Então temos aqui algo como um botão, mas ainda não ligamos para o nosso componente. Então, precisamos chamar o componente botão Play de alguma forma em nossa aplicação. Então, na página de detalhes. Então eu vou remover isso no peito para não ter um erro. Assim, podemos apenas ter um texto preferível e eu sou endereçável. Então vamos para a página de detalhes. Vou importar o botão Reproduzir exatamente como fizemos antes com qualquer componente. Então aqui vou dizer Importação. E então eu vou colocar o meu botão de reprodução de, e então eu vou colocar o arquivo ou os componentes da pasta, e então eu vou colocar o meu componente botão de reprodução. Então aqui temos um erro. Trabalhamos porque fizemos isso, fechamos os componentes. Então temos aqui botão Play, precisamos fechá-lo assim. Então salvamos novamente e veremos que ainda estamos recebendo um erro aqui. Então, o erro vem por causa da importação. Então sempre quando você está dentro de um arquivo ou você é importante, uma classe ou uma constante ou qualquer coisa, você tem que ter certeza de que se você tem esse padrão, importação é como botão Play. Então, no nosso caso aqui, o componente do botão Reproduzir é exportado como padrão. Então você não precisa colocá-lo dentro deste suporte. Então, quando você precisa colocá-lo dentro deste suporte, como nós temos no caso de serviços, temos constante múltipla, somos importados e nenhum deles são padrão. Então, nesse caso, coloquei entre parênteses. Então, caso contrário, se você não sabe, se você tem apenas um componente aqui, então você apenas colocá-lo assim sem colchetes. Então, isso quando você receber esse erro, então certifique-se de que você sempre tem a maneira certa de implementar as coisas. Então aqui estou eu possível. Então, como você vê aqui, nosso componente e foi executado da maneira certa. Então nós temos o botão aqui, mas também, nós precisamos colocar um botão play e ele tem algum ícone, que é uma peça. Então, para ter um ícone, se você se lembra, falamos sobre Icon Library, que temos instalado anteriormente em nosso aplicativo. Então precisamos importar também o componente ícone aqui podemos importar algo chamado ícone da biblioteca que temos instalado antes. E o nome da biblioteca era React Native ícones. E isso Reagir ícones vetoriais nativos que você pode escolher, bem como uma biblioteca à qual os ícones pertencem, porque esta biblioteca contém várias bibliotecas como, Oh, fonte incrível, como iônica, por exemplo, ícones, Google materiais, etc Então, quando você colocar barra aqui, você terá várias opções, como ícones de material. Então você pode escolher entre ícones materiais. Mas quando você escolhe ícones iônicos, então você tem que ir para ícones iônicos e escolher o ícone certo para você. Então, no meu caso, eu vou escolher esses ícones iônicos. Então aqui, se formos para estes ícones de íons, aqui, precisamos ir para a documentação desses ícones de íons. Então eu estou indo aqui para o Google. Vou colocar ícones de íons e, em seguida, ícones de íons seria repetido para mim. Então nós temos todos os ícones aqui, então eu posso obter o nome do ícone. Então, no nosso caso, precisamos de um ícone de botão play. Então precisamos deste. Então, podemos ter aqui levado adiante esboço, que você possa copiar o nome a partir daqui. Então eu copio o nome e então eu vou para o meu pedido. Eu chamo o componente em vez do texto. Então temos que abri-la e fechá-la novamente. Nós removemos este compressível. Então aqui as propriedades deste componente que ele pode tomar um nome e dentro deste nome você pode definir o nome do ícone que você já copiou. Então podemos ter aqui porque estamos usando esta biblioteca. Então eu vou ter levado adiante esboço. Então é exatamente o nome que é especificado na biblioteca de ícones de íons. E com certeza você pode dar também algum tamanho. Então podemos dar tamanho. É exatamente como fizemos com as estrelas, se você se lembra, nós demos. Então, depois de salvarmos, veremos que o ícone foi exibido dessa maneira. Então não temos nenhum problema com os ícones. Vamos tentar outro ícone apenas para ter certeza de que estamos realmente indo bem. Então eu vou copiar o nome deste ícone. Então temos aqui algo chamado círculo no meio. Então, não temos apenas para a frente, mas vamos colocar círculo. E então eu vou salvar. E como você vê, eu tenho o ícone dessa maneira. Então esta é uma maneira como podemos ter vários ícones em nossa aplicação. É uma ótima biblioteca. Você pode usar todos os ícones da biblioteca de ícones mais famosos em, na internet. Aqui temos como reclamar de ES fiapos. Precisamos remover este ícone daqui e fechá-lo com uma cláusula para que não tenhamos um problema. Este componente de texto, nós não precisamos mais dele, então nós o removemos. E agora precisamos ter o diretor ou este botão totalmente para ser colocado aqui de alguma forma. Mas antes disso, vamos estilizá-lo. Então eu daria para este botão como algum estilo ou este possível algum estilo. E de estilos que estou criando a partir das folhas de estilo, exatamente como fizemos antes. Então eu não vou repetir toda vez que temos que criar uma folha de estilo. Então, a folha de estilo, temos que importá-lo novamente de React Native. E então eu criei um estilo para este botão. Então, alinhe o conteúdo como o conteúdo estará no centro do botão. E também precisamos de um raio de fronteira. Eu coloquei 50 porque se eu não colocar 50, será como um retângulo. Então eu dei um monte de raio de fronteira para torná-lo como circular. E depois ervas daninhas. E nós temos alguma altura ou você pode dar uma coisa ruim também. Então você pode dar como uma largura 50. Assim, ele terá 50 pixel em vitórias e algum preenchimento para empurrar o conteúdo 10 pixel leva um pixel de todos os lados. E então eu dei um fundo como algo como azul. Claro que é cor feia, mas podemos ter cores mais bonitas. Então eu tenho alguma cor que é hard-codificado definido, então eu entendi. Então eu tenho aqui hash e, em seguida, o número ou o código do número ou da cor. Mas podemos dar para este ícone alguma coloração. Como se pudéssemos dar uma cor branca. Então você pode ter uma propriedade aqui. Não estamos usando um ícone de pasta de estilo porque na documentação desta biblioteca de ícones, você pode usar uma cor. Então, se você vai para a documentação deste ícone ou a biblioteca de ícones que temos usado aqui, você verá todas as propriedades que você precisa. Então o que eu realmente preciso é uma propriedade chamada cor. Em seguida, você pode definir a cor que você deseja. Então, no meu caso, vou colocar a cor branca aqui para o ícone. Então temos aqui uma cor branca. Assim, desta forma, somos feitos com o nosso componente do botão Play. Por isso, chamámo-lo. Agora precisamos posicioná-lo de alguma forma como aqui. Então, se você se lembra, nós criamos como um posicionamento. Então podemos nos dar tempo para este componente. Então todos nós podemos, podemos dar um estilo para a visão desses componentes. Então eu vou ter aqui estilo e, em seguida, eu vou usar estilos ponto, e então eu vou dar um botão Play. Então podemos ter aqui a classe de botão Play. Assim, a classe de botão Play terá algum requisito especial. Então temos no final, vamos colocá-lo aqui para que possamos ter um botão play. E este botão Play terá uma posição que é absoluta. Assim, podemos absoluta a posição deste botão. Então vamos salvar agora para ver onde está indo. Ok, como você vê, ele tem absoluta como alguma posição e ele estava centrado no meio da vista. Qual vista? Então, a visão que definimos aqui como um pai. Então aqui temos um recipiente e, em seguida, dentro deste recipiente após a imagem. Então será esta vista porque a vista sobre ele ou este outro componente sobre ele é uma imagem. Assim, desta forma, teremos essa visão como um pai. E então temos outra visão onde temos este botão. Então, dessa forma, podemos dar topo de posicionamento para este botão que pode ser, por exemplo, menos 20. Então isso é depois que eu calculei. Então você vê que tem sido aqui porque se eu dei 0, então será desde o início desta visão. Então, o final ruim, este que eu te disse. Então ele tem um top 0 aqui. Então esta é a prova do meu OK que, que esta visão é uma patente deste componente. Então eu vou dar menos 20 e então nós podemos dar a partir daí, certo? Como se a puséssemos aqui à direita. Também um 20 pixel, não menos 20 porque ele vai sair de seu conteúdo e será 20 pixel. Então o botão estará exatamente aqui. Então vamos posicioná-lo de forma mais agradável. Eu acho que 20, 25, sim , assim, será principalmente centrado. Assim, o nosso botão está pronto para que possamos ter alguma função principal para uma peça ou um filme, que veremos nas próximas palestras. Assim, podemos ter um modelo para reproduzir um vídeo quando o usuário está clicando neste botão. 49. Modal para o vídeo: Nesta palestra, vamos ver como podemos reproduzir um filme quando estamos clicando neste botão. Mas antes disso, precisamos ver um lugar onde possamos fazer esse filme. Normalmente você, quando quiser reproduzir um filme em tela cheia, pode usar um modelo. E modelo em React Native é um componente que já está definido nos componentes de React Native. Você também pode usá-lo para exibir algum conteúdo na tela para mostrá-lo e ocultá-lo com base no comportamento do usuário. Então, por exemplo, como você vê nesta imagem, você pode ter como alguns um título ou um texto e ok, ou notificações. Desta forma, você pode ver um modelo sobre a camada de aplicativo. Dessa forma, você pode colocar um vídeo dentro do modelo e reproduzir esse vídeo para o usuário. Então, primeiro, podemos ter um modelo em nosso aplicativo para ser ou para reproduzir um vídeo dentro dele. Então vamos criar este modelo. Primeiro de tudo, quando você vai para a documentação da biblioteca de componentes de React Native, você verá algo chamado modelo. E neste modelo podemos usá-lo para exibir algumas informações dentro dele. Então, primeiro de tudo, precisamos importar um modelo do React Native. Então vamos importar este modelo. Então eu vou para o meu código e ir para a tela de detalhes. Se você se lembra, nós colocamos um ScrollView. Então nós temos a visão de rolagem aqui, que é toda essa área de nossa aplicação. Vamos colocá-lo fora desta área. Então, após o fechamento de ScrollView, então aqui vamos colocar o nosso modelo. Então eu vou dizer aqui modelo, e então eu vou fechar o modelo. Então precisamos importar também o modelo de React Native. Então guardamos isso. Ok, o modelo tem um pouco embrulhado na etiqueta de fechamento. Então, dessa forma, precisamos envolver todo o conteúdo dentro uma visão como a que tem uma visão de rolagem e o próprio modelo. Então, primeiro, antes da exibição de rolagem, vamos colocar uma visão. Então, podemos ter um componente de visão aqui, e nós fechá-lo depois que temos o modelo fechado. Portanto, desta forma, não obteremos esse erro. Então, como podemos usar esse modelo, este modelo requer algumas informações para adicioná-lo dentro dele. Então, primeiro de tudo, você vê que você precisa ter algum tipo de animação. Você precisa de um transparente ou algumas propriedades que são sempre definidas aqui. Primeiro de tudo, vamos ter tipo de animação, que será slide. Então temos aqui como propriedade chamada tipo de animação será slide. E também, precisamos ter alguma visibilidade e também onRequest fechar. E se você vê aqui, temos dentro dele um conteúdo que é dinâmico e você pode colocar o que quiser. No nosso caso, vamos colocar um vídeo aqui. Então, primeiro, temos que definir uma propriedade visível, e esta propriedade visível que será chamado modelo visível. E este modelo visível é uma variável que vem como um estado. Então vamos copiar também a variável de estado e ir para os nossos detalhes. Então, em nossas variáveis de estado, como você vê aqui, podemos definir o estado visível do modelo. Assim, por padrão, o modelo não é visível quando estamos visitando esta página, somente quando clicamos neste botão, como veremos mais tarde. Então, de volta à documentação, temos que colocar modal visível no, nossas propriedades do modelo. Então nós temos aqui algo visível que é propriedade sobre o modelo se ele é visível ou não. Então eu vou aqui para o modelo e eu vou definir esta propriedade. Assim, desta forma, não teremos o modelo por padrão. Então, por padrão, é falso. Mas quando eu colocar isso para a verdade, então vamos colocá-lo aqui para a verdade. Então você vai ver que nós temos algum espaço em branco. Este é, na verdade, o modelo, mas aqui não temos nenhum conteúdo. Vamos colocar algum conteúdo dentro dele, como eu vou colocar aqui dentro do modelo, algum componente de texto. Então eu vou ligar aqui por mensagem de texto. E eu vou colocar dentro deste texto como um nome ou olá, como se tivéssemos que colocá-lo longo Olá ou velho, algo assim. Você verá que o modelo está aqui como você vê, mas o texto está totalmente na parte superior do telefone. Então o modelo é visível. Então, dessa forma, tudo está funcionando bem. Então você não precisa se preocupar com esta tela branca. Agora, Vamos definir de volta o estado padrão deste visível do modelo para ser falso. Então, agora não queremos mais vê-lo. Ok, legal. Então, nossa exigência agora precisamos ter que definir este modelo para ser visível clicando no botão. Mas aqui, nosso botão não é diretamente o componente principal que criamos dentro do botão Play. Então, dessa forma, eu preciso passar também como este modelo visível para este botão para que eu possa clicar nele. E, em seguida, dentro do botão Play, Eu posso ir para aqui para o reprimível e, em seguida , definir em pressione como uma das propriedades deste componente. Então nós temos uma função onde podemos dizer, ok, altura para mim, o modelo, mas como podemos passar uma função para o componente. Então eu preciso deste componente que é chamado botão Play e eu criei para lidar também cliques porque aqui agora ele não está manipulando nada. E se eu lidar com os cliques dentro dos botões de reprodução, eu não tenho acesso ao, por exemplo, a variável que é chamada model visible. Então, desta forma, não tenho a possibilidade de ligar entre esses dois componentes. É exatamente da mesma forma como estávamos enviando propriedades fazer um componente de um componente pai, podemos muito bem enviar uma função. Então, por exemplo, eu vou dizer aqui que eu vou colocar uma propriedade que é chamado de imprensa punho. E esta prensa alça, que será algo onde eu posso chamar uma função ou uma função e fazer algo para mim como Definir visível para ser verdade. Então, como eu posso passar uma propriedade de função para um componente em Reagir. Então, para fazer isso, podemos ir tão bem exatamente como estávamos definindo um componente ou uma propriedade para este componente usando React. Então, primeiro, precisamos definir peito punho ou uma constante como após a renderização. E eu digo que esta constante chamada manipulado pressione Adicionar. Será a partir deste ponto adereços. E, em seguida, pressionando os componentes processáveis. Eu vou dizer que, ok, executar para mim este peito, mas chamar a imprensa manipulada. Então, desta forma, eu vou tê-lo dessa maneira. Porque se formos para a documentação desta biblioteca, toda esta imprensa U, como podem ver, temos aqui na imprensa. E então ele está passando algo como uma função. E então ele definiu uma função personalizada que ele quer. Por exemplo, set pressionado, algo assim. Dessa forma eu posso dizer, ok, executar para mim essa função que é passada para o componente de botão Play. Então, dessa forma, quando eu salvar e também um ISA, este, eu vou dizer que ok, imprensa manipulada está funcionando para mim, mas aqui eu preciso definir uma função. E esta função vai definir para mim o modelo para ser visível ou não. Então, em vez disso, você pode definir sua própria função. Então eu vou dizer, por exemplo, função que eu vou chamar como vídeo mostrado. Então este vídeo mostrado será uma função, mas você não executá-lo, porque se você executar, então é errado. Então, ele será executado diretamente. Você não vai lidar com isso porque estamos lidando a execução dentro do componente botão Play com isso. Então, se você ver que estamos tendo lidado imprensa, que será, nesse caso, a função de vídeo mostrado, que passamos através deste componente e será executado aqui. É um silêncio, complicado, mas é fácil de entender. Então eu passo uma função para este componente e eu estou executando-o. Então é isso. É muito simples. E eu estou executando-o quando, quando eu estou pressionando este botão, que é chamado de repressão, e ele tem este ícone. Qual deles é esse? Então vamos definir a função de vídeo mostrado. Então eu vou dizer aqui const, e este custo será um vídeo mostrado, e será uma função. E esta função será implementada para definir o vídeo ou o modelo visível para ser um verdadeiro ou falso. Então, desta forma, Vamos colocá-lo por agora, como vou mostrar-lhe como alternar esta função mais tarde. Então agora vamos salvar tudo. E então vamos clicar neste botão. Como você vê, eu tenho o modelo, mas eu não tenho possibilidade de fechá-lo. Então, dessa forma, Vamos criar uma função ou um botão onde podemos pressioná-lo e esconder este modelo. Então vou entrar neste modelo e criar um componente reprimível. Temos aqui a imprensa civil. E essa pressão eu preciso para importá-lo também de React Native. Então podemos ir aqui e dizer: “Importar para mim, imprensa”. Ok, eu já tenho. Então podemos descer aqui e teremos um repressível e lidaremos com a imprensa exatamente como fizemos dentro daquele botão. Então, quando no peito, eu posso chamar a função, que é chamado de vídeo mostrado. Mas temos que executá-lo de uma forma como esta. Então temos aqui um vídeo mostrado. Então, e vídeo Shawn vai lidar com este processo e ele terá aqui para definir o modelo como verdadeiro. Então, dessa forma, nós também podemos não apenas definir o modelo como verdadeiro, mas podemos alterá-lo. Então, como podemos alternar isso? Então eu não posso dizer, como quando eu digo vídeo mostrado, pegar o estado atual do modelo e, em seguida, opor-se a ele fora dele. Então, o que é um estado atual do modelo é modelado visível. Então, depois disso, eu vou dizer, ok, definir modelo visível para ser opor ao estado atual do modelo. Então, quando é verdade, então ele vai mostrá-lo. Quando for falso, vai escondê-lo. Então, dessa forma, podemos ir aqui e vamos executar o vídeo mostrado ao pressionar este botão. Mas vamos envolver o conteúdo do modelo para estar dentro de você. Porque sempre, como você vê na documentação, é melhor segui-lo. Então aqui, aqui em cima de tudo dentro de você. E então ele criou um botão reprimível. Então, dessa forma, vamos fazer o mesmo. Então eu vou aqui dentro do modelo e eu vou definir uma vista. E esta vista, vou envolvê-la em torno de todos estes supressíveis. Então eu coloquei aqui também o fechamento dessa visão. Então podemos ter aqui assim. Então, depois disso, também podemos colocar um texto ou um ícone ou exatamente qualquer coisa. Queremos, exatamente como fizemos com o botão. Vou para uma solução fácil. Vou colocar uma mensagem. E neste texto vou dizer, por exemplo, ocultar modelo. Certo, salvamos tudo. O modelo de altura aqui no topo e eu não posso clicar nele. Então, é melhor dar a esta visão algum estilo onde podemos ser capazes de, por exemplo, centralizado este botão aqui no meio. Então podemos ter aqui estilo. E este estilo vai ler a partir de estilos ponto e podemos dar, por exemplo, modelo de vídeo. Então, dessa forma, temos que definir o modelo de vídeo de alguma forma para que possamos descer. E dizemos aqui, modelo de vídeo definiu isso já. Então eu tenho modelo de vídeo, flexionar, justificar conteúdo, alinhar itens exatamente da mesma maneira como nós, estamos centrando itens no meio como vimos no início deste curso. Então agora esconder modelo está no meio. Então, quando eu clicar nele, ok, o modelo está escondido. Quando eu abri de novo, o modelo está aparecendo. Então, dessa forma, eu estou executando o vídeo mostrado. Está lendo o estado atual do modelo e se opõe a ele. Então, quando eu clicar nele, ele vai se esconder. Quando eu clicar aqui, ele vai aparecer. Então, depois disso, em vez de ter aqui modelo de esconderijo, vamos ter um player de vídeo. E isso é o que veremos na próxima palestra. 50. A reprodução de um filme no Modal: Ok, agora nesta palestra vamos ver como podemos reproduzir um vídeo ou reproduzir um filme. Então, quando eu pressionar neste botão Play, eu vou mostrar o modelo. E com este modelo, vou ter aqui um vídeo. Então, podemos fazer isso facilmente usando uma biblioteca que é chamado de controles de vídeo Reagir nativos. Então, se você for ao Google e procurar por controles de vídeo React Native, então você terá a primeira coisa, algo do GitHub. Então esta é uma biblioteca de código aberto. Você, podemos usá-lo para reproduzir um vídeo em nosso aplicativo. Então, como você vê aqui, o vídeo será reproduzido como desta forma. Então os requisitos primeiro, precisamos instalar esta biblioteca. Então vamos ver como podemos instalá-lo. Ele disse que precisamos instalar duas bibliotecas. Um deles é npm instalar, salvar, Reagir vídeo nativo, e também Reagir controles de vídeo nativos. Então vamos instalar essas bibliotecas de ferramentas. Então eu iria para o meu aplicativo ou para o meu código e abrir o terminal. E então eu vou colar este comentário. E, em seguida, ele vai ser instalado para o meu aplicativo e nós podemos usá-lo depois. Então agora, como você vê aqui, a biblioteca foi instalada, há alguns avisos, ok, não se importa com eles. Eles são apenas sobre vulnerabilidade. Há algumas correções que devem ser feitas nessas bibliotecas e elas virão nos próximos lançamentos. Então, agora vamos esconder o nosso terminal. Não precisamos mais dele. E então vamos trabalhar com o nosso modelo. Então, em primeiro lugar, precisamos remover esse permitido ou podemos mantê-lo de lado. Colocamos de volta mais tarde. Então eu vou ter aqui endereçável para fora. Então eu não usaria mais isso. E teremos aqui para importar a biblioteca. Então precisamos importar o componente que tem os vídeos. Então eu vou aqui e vou verificar como podemos usá-lo. Eles usam diz que você precisa importar algo chamado player de vídeo. E o player de vídeo terá essas propriedades. Claro, existem muitas propriedades, como veremos mais tarde, podemos usá-las também. Então, primeiro, vamos pegar esse componente e importá-lo para o nosso aplicativo. Então eu vou voltar para o código para a placa superior e, em seguida, temos esse componente pronto e podemos usar o exemplo dele. Então eu posso, novamente de volta ao exemplo. Então eu posso usar o que está dizendo aqui, e eu copiar o componente que é definido aqui. Então, voltando para o código e eu vou colocá-lo onde dentro do modelo. Eu vou ter aqui um player de vídeo, algum exemplo de URL, algum vídeo e navegador será algo como para navegação, podemos mantê-lo porque vamos precisar dele mais tarde. Então agora eu vou salvar. E então vamos pressionar este botão Play. Certo, como vê, temos um problema. Então diz assim, dot adereços dot navegador. Então precisamos remover essa propriedade também. Então eu estou mostrando passo a passo para não ter um erro. E então você não tem que fazer perguntas e esperar por uma resposta. Então eu estou mostrando todos os possíveis erros. Então agora precisamos apenas de uma propriedade que é chamada de fonte. E esta fonte, você tem que especificar algo chamado URI. E você terá vídeo MP4, vídeo mp4, como você pode obtê-lo de qualquer lugar. Você pode fazer upload de vídeo, fazer o seu servidor, e então você pode reproduzi-lo desta forma. Então você pode apenas obter o link do vídeo. Então agora nós salvamos, e agora eu vou reproduzir o vídeo ou eu estou indo para o meu vídeo, e então eu pressionar Play, e nós chegamos aqui outro erro. O erro está mostrando aqui que a biblioteca ainda não está definida ou o vídeo da biblioteca ainda não está definido. Portanto, para isso, precisamos de encontrar uma solução que possa ser possível fazer sem ligação. Porque como você sabe que fazer uma ligação como Reagir link nativo é feito automaticamente em Reagir nativo seis e acima. Então eu prefiro voltar para a documentação da biblioteca. E então vemos passo a passo, quais são as soluções para isso? Então, como você sabe que esta biblioteca está dependendo de algo que é chamado Reagir vídeo nativo. Então, como você vê aqui, se você ler a documentação, precisamos clicar em Reagir vídeo nativo porque já o instalamos com este comando. Então temos Reagir vídeo nativo e Reagir vídeo nativo controle. Então, dessa forma, temos que ir para React Native Video library e ir e verificar passo a passo como instalá-lo, porque não é suficiente que você faça apenas MPM instalar às vezes. E então o aplicativo está funcionando como uma mágica. Como você vê aqui, existem algumas etapas para a instalação do iOS, Android e também há outros sistemas. O que estamos trabalhando agora é iOS. Se você quiser seguir para o Android, você pode fazer da mesma maneira também. Ele diz que se o seu projeto usando React Native menos de 0.6, então você tem que fazer essa ligação. Caso contrário, você não tem que fazer que vinculação ser ensinado porque automaticamente reagir nativo faria com que ele funcione no Android. E, claro, se você tiver mais problemas, você pode fazer o seguinte como é mencionado aqui. Então, primeiro de tudo, eu estou indo para a instalação iOS. Eu vou aqui para os detalhes do iOS e ele fica para mim novamente. Ok, Você está usando React Native 0.6 e acima. Então você tem que executar a instalação pod. Então é isso. Você não precisa fazer qualquer vinculação se você estiver fazendo menos como zero ponto 59. E depois. Você tem que fazer uma ligação. Portanto, tenha cuidado porque se você fizer a vinculação e a instalação do pod, você receberá outro erro. E é muito difícil de resolver depois disso, e você vai para o ponto morto em sua aplicação. Então eu estou aconselhando você a seguir exatamente a documentação. Então eu vou aqui e fazer a instalação MPM. Então, fazendo a instalação pod, ele tem duas maneiras. Talvez você possa dizer pod install, tudo o que você pode fazer como NP x pod install, então assim. Então, quando você faz no diretório de filmes ou no diretório do projeto, você tem exportação vazia instalada. Em seguida, você instalará essas dependências. E ele vai dizer-lhe como, ok, tudo está instalado e ligado ao aplicativo iOS. Então, nesse caso, você precisa novamente reiniciar seu aplicativo usando o terminal. Então eu vou fechar minha inscrição. E, novamente, eu vou executar o aplicativo novamente usando React Native executar iOS. Então MDX React Native executar iOS vai me ajudar a corrigir esse problema, espero. Ok, agora o aplicativo está sendo executado novamente e podemos clicar em um dos filmes. Então, por exemplo, vamos para este e clicamos no botão Play. Então, quando você clica em Play, Nice, Você tem como vídeo player funcionando bem e você tem controle sobre a voz. E você também pode controlar o lugar do, como, por exemplo, o vídeo. E também você pode pará-lo e pausá-lo. E também você pode ver algum temporizador. E você também pode voltar. Mas aqui no meu caso, eu não posso voltar para fora deste vídeo ou para fora deste modelo porque precisamos de funcionalidade de volta. Então, de volta para a documentação da biblioteca que é Reagir player de vídeo nativo ou Reagir controle de vídeo nativo, que temos instalado antes. Há um método ou uma propriedade onde podemos passar para o componente e, em seguida, ele terá como algo e efeito. Então, porque eu não posso pressionar para trás aqui porque eu preciso especificar uma função. Eu preciso definir a função que vai esconder para mim este modelo. Então eu posso desempacotar quando eu clicar em volta, que é este, então o modelo será escondido. Então, como podemos fazer isso facilmente, vamos para o nosso código e, em seguida, ir para o player de vídeo e, em seguida , redefinir em volta exatamente como nós temos isso na documentação. E isso na parte de trás será uma função. Então, podemos executar uma função na chamada de volta desta função. Então, aqui vou dizer vídeo mostrado. Então o vídeo mostrado executado para mim se o modelo está mostrando. Então agora salvamos e vamos novamente para a nossa aplicação e, em seguida, clicamos em volta. Ainda temos um erro porque este navegador ou esta função na parte traseira requer o Navegador. Se você se lembra, nós excluímos esta parte aqui. Então, voltando ao exemplo que ele forneceu aqui. Há uma propriedade chamada Navigator. E este navegador está passando o controle de navegação da tela atual. Então precisamos do necessário para este player de vídeo. Então eu vou colocar aqui e navegador, e eu não vou usar este ponto prop dot navegador. Vou usar o aplicativo que passamos aqui, se você se lembra. Então usarei essa navegação para fechar esse modelo. Então aqui eu diria, em vez deste produto de ponto do Navigator, eu diria usar navegação. E então vamos salvar e, em seguida, ir para o aplicativo de vídeo novamente e pressionar para trás. Certo, a modelo está escondida. Então, dessa forma, o vídeo mostrado é executado e em seguida, o instinto modelo escondido porque ele já é mostrado. Agora estamos reproduzindo o vídeo do jeito certo de todos os filmes. Então, para isso, você precisa fornecer também. Se você quiser vídeos onde você pode fazer upload para o seu servidor. Infelizmente, esta API não fornece vídeos devido a direitos autorais. Então podemos ter aqui como algum especial, se você tem direitos autorais para exibir alguns filmes, então você pode substituir esses links por esse vídeo. E então você pode muito bem fazer alguns aplicativos de filmes, reproduzindo alguns filmes no aplicativo. 51. Lógica de fechamento modal: Ok, nesta palestra vamos fazer alguma lógica e alguma refatoração para o nosso leitor de vídeo. Assim, por exemplo, eu posso criar um componente que é chamado de vídeo também. E então eu posso jogar ou colocar o player de vídeo dentro dele. E então eu posso passar algumas propriedades. Esse objetivo desta palestra que eu vou mostrar a vocês como criar um componente de uma maneira diferente também. Então, podemos primeiro ir para o, nossos componentes e definir um novo arquivo, e nós chamamos de vídeo. Então podemos dizer aqui video dot js. Então, em vez de usar as ferramentas de trechos, podemos usar também nossa mão. Assim, podemos criar o componente à mão para entender como estamos realmente trabalhando com componentes em React Native. Então, criando um componente, um React Native necessário para importar React. Então, podemos fazer isso com importador ou com Ferramenta de Recorte. Podemos ter importação Reagir de Reagir. E então precisamos usar o nome para seu componente para que possamos dar multa, uma constante e damos o mesmo nome do arquivo, que será vídeo. E então podemos definir como uma função. E então esta função terá como retorno, onde vamos retornar o modelo deste componente. E dentro do modelo deste componente, vou usar o player de vídeo que criamos no detalhe. Então aqui vou copiar esta parte. Então eu vou pegar tudo isso e depois colocá-lo no vídeo. Então, nesse caso, precisamos importar também o player de vídeo. Então, desta forma, eu tenho reprodutor de vídeo importação do controle React Native Video. Então agora não temos esse controle sobre a navegação deles. E também não temos o controle sobre a função de vídeo Shawn. Então, dessa forma, podemos criar propriedade como vimos anteriormente com o botão Play. Mas aqui podemos criar as propriedades como uma função de uma maneira diferente. Você pode encontrar ou passar avisos a um componente aqui. Então, quando você está chamando um componente ou você está definindo um componente, você define um parâmetro como um objeto e você dá um nome a ele. Por exemplo, estou dizendo sobre roupas. Assim, esta função será executada toda vez que algo aconteceu fora deste componente. Então, dessa forma, eu tenho que ir para o detalhe e então eu quero chamar meu componente de vídeo. Então, queremos chamar esse componente de vídeo, precisamos exportá-lo. Então aqui, depois de ter um custo definido, eu posso dizer exportação padrão, como por padrão, como vimos anteriormente. E então eu defino esse componente que eu vou exportar. Então temos este vídeo é exportado, podemos usá-lo na tela de detalhes. Então, aqui eu vou dizer quando eu subir importação para mim vídeo de, mas não de controles de vídeo Reagir nativo. Nós vamos importá-lo de componentes e, em seguida, vídeo. E depois disso, vamos chamar esse componente. Então eu vou dizer aqui no próprio modelo de vídeo e, em seguida, o vídeo está indo aqui. Mas antes disso precisamos passar essa propriedade que definimos aqui. Então eu posso dizer cláusula ON, para que possamos ter a propriedade aqui também. Então aqui temos a UNCLOS. Esta propriedade será uma função. Então, dessa forma, eu posso dizer que esta função estará executando o vídeo mostrado. Então você pode dizer aqui, vídeo mostrado função. Então, a cláusula ON irá como esta função como você vê aqui, e seria executado dentro do componente de vídeo. E você também pode. Você não tem que colocar tudo isso. Você pode colocar apenas vídeo mostrado. Então, podemos colocar aqui um vídeo mostrado, assim como uma função e ele será executado dentro do componente de vídeo quando na parte de trás, por exemplo. Então eu posso dizer aqui, em vez de vídeo mostrado depois UNCLOS, então na parte de trás do player de vídeo, ele estará executando este. Há também outras propriedades que eu encontrei na documentação, possamos usá-los também para lidar com a nossa aplicação da maneira certa. Assim, por exemplo, em Enter tela cheia ou uma saída de tela cheia e também exibir controle. Ou, por exemplo, podemos dizer como no fim quando o vídeo e vamos fechar o vídeo. Então, dessa forma, eu posso terminar o vídeo ou fechar o modelo quando houver acabamento do vídeo. Então, em vez disso, posso dizer aqui como no fim e também como na parte de trás, temos também fechar também esta navegação. Não precisamos mais dele para que possamos removê-lo. Então, podemos testar agora a nossa aplicação. Então eu vou salvar tudo. Então temos aqui cláusula ON vídeo, vídeo mostrado e também este. Não deveria ser fechado assim. Podemos fechá-lo de um lado para ignorar o erro de fiapos ES. Então agora temos modelo e dentro da vista e puro e limpo, não temos tanto código aqui. Então, quando eu jogar este vídeo, como você vê aqui, Ok, ele é jogado bem. Mas quando eu clicar em Voltar, então está terminando. E também quando o vídeo está indo para o fim, ele deve fechar também. Então vamos esperar agora. Vai fechar ou está terminando. Agora, ele saiu automaticamente do modelo. Então, dessa forma, eu tenho na função traseira que fez para mim o trabalho e também na função final. Existem também várias propriedades. Você pode vê-los na documentação, por exemplo, alterna o modo de tamanho em tela cheia, por exemplo, temos essa propriedade. Se o definirmos como true, então ele não irá alternar o vídeo para ser assim. Então, quando você clicar neste ícone de tela cheia, não será assim. Então, é apenas um caso em que você pode lidar também como este modo de tela cheia, controle, animação, tempo, como a quantidade de tempo milissegundos para animar o controle dentro e fora. Como se você não tivesse que mostrar que controla depois de algum tempo. Então, por exemplo, quando eu tenho meu mouse manipulado assim sem nada, em seguida, os controles estão desaparecendo. Então, o que fazer quando eu seguir em frente, eu toco no telefone, então eu tenho os controles de volta novamente. Então, todas essas propriedades, você pode experimentá-las sozinho e então você será capaz de ver como isso funciona e como esse player de vídeo está trabalhando com você. Então esta é a funcionalidade que eu queria mostrar a vocês. É algo como mostrar como podemos criar um componente por nós mesmos e definir propriedades de uma maneira diferente para chamar algumas funções externas fora desse componente. Última coisa que eu quero mencionar também sobre nosso modelo que quando precisamos apoiar a orientação, então quando eu voltar ou virar o telefone horizontalmente ou retrato. Então podemos ter de alguma forma mais V para ser como tela cheia. Então, dessa forma, eu também posso definir uma função que é definida ou uma propriedade que é definida no modelo, que é chamado de orientações de suporte, que eu obtive também a partir da documentação do modelo. Então eu posso dizer aqui, como orientação apoiada será retratado e paisagem. Então, dessa forma, o modelo, nós apoiamos isso também. Então, quando meu telefone vai virar, então ele vai fazer algo como para mim para suportar o modelo da maneira certa. Então, agora, quando eu vou para o vídeo, eu preciso adicionar uma propriedade dessa maneira, que seria chamado de orientação de tela cheia. Tudo. Assim, eu posso ter controle de orientação sobre todos os modelos. Então, quando o modelo está voltando para ser retratado, então também o player de vídeo será retratado. Então vamos tentar isso. Então eu vou salvar isso e eu vou começar o vídeo. Certo, temos o vídeo no caminho certo. Vou virar o telefone para ser como uma paisagem para que possamos colocá-lo assim. Como você vê, o player de vídeo também se adaptou a isso e também ao modo de tela cheia do telefone. Então temos agora essa capacidade de ligar o telefone com base nas propriedades que temos e como temos definindo nossa aplicação. Então, dessa forma, também seremos capazes de ver tela cheia quando estamos girando o telefone. 52. Adicione barra de navegação: Se você se lembra, em app.js, criamos várias telas. Um é para casa e outro para detalhes. E quando eu navegar para os detalhes também, eu vou ver como uma barra de navegação na parte superior. E nós podemos de alguma forma ajustar essas barras de navegação para fazer ajuste em nossa aplicação. Então, por exemplo, não preciso mostrar esse detalhe. Eu não quero mostrar esta função em casa e também gosto de como temos aqui a seta. Quero uma barra de navegação personalizada. Por exemplo, no caso de eu estar na tela inicial, eu posso ter um botão de pesquisa onde eu posso vendê-lo para filmes. E também posso. Quando vou ao cinema, só tenho aquele botão de voltar. Então, se você se lembrar, em Reagir navegação nativa, nós definimos as telas e eles têm algumas propriedades. Um deles é chamado de componente. E também há outra propriedade em Reagir navegação nativa, que é chamado de opções. E essas opções você pode passar as opções que você deseja dentro de sua navegação. Uma dessas opções é chamado cabeçalho. Assim, o cabeçalho pode ser desta navegação ajustável para receber algum componente específico, não este componente ou não o componente padrão que é definido na navegação, também incluir outras propriedades como eles são título de cabeçalho de imagem de volta, e também cabeçalho de fundo esquerda tinha sua luz. Muitas informações que você pode especificar no cabeçalho desta navegação ou desta tela. Então, por exemplo, vamos tentar uma propriedade que é propriedade que é chamada cabeçalho transparente, e este balanço planta cabeçalho. Se você colocá-lo para verdadeiro, em seguida, ele vai fazer o cabeçalho é um transparente como você vê aqui. Então a navegação estará dentro desta tela. Podemos ter a navegação diretamente dentro de nossa tela, não fora da tela, assim teremos algum espaço na área segura como lembramos. Então, porque chamamos isso de área espacial, porque fora dela, não é uma área segura. Então, também vamos definir essa opção para a página de detalhes. Então eu vou aqui para as opções, copiá-los, e defini-los também para a página de detalhes. Então, no detalhe, eu vou ter um cabeçalho transparente também. Mas como eu disse, precisamos nos livrar desta casa e também do título que está aqui. Então, para isso, podemos criar nosso próprio componente dizendo que eu quero cabeçalho. O cabeçalho será totalmente diferente de alguma forma, chamando uma função que é uma função de retorno de chamada onde eu posso especificar o componente de renderização que será renderizado aqui. Então, por exemplo, você pode dizer que eu quero apenas um texto, eu quero apenas um componente específico. Eu quero apenas um botão onde eu faça uma busca. Assim, desta forma, você pode criar seu próprio componente e especificá-lo no cabeçalho aqui. Então vamos tentar o aplicativo e criar nosso componente. Então eu vou para componentes, criar um novo componente. Então aqui teremos um componente, podemos chamá-lo de navegação. Então eu diria aqui navegação ponto js. E então criaríamos um componente puro como vimos antes. Então, usando o fim de semana ferramenta de corte tem uma classe de componente puro e esta classe de componente de computador será importado e estendido de Reagir nativo ponto-ponto puro componente. Então eu vou ter o seu IMR e, em seguida, navegação classe estende Reagir ponto puro componente como vimos antes. Ou podemos renomear nossa navegação para não ter um conflito em nomear fim de semana, digamos como navbar. Então podemos chamar este componente como uma barra de navegação. Não tem conflito com outros nomes da navegação. Então, podemos renomear este arquivo para ser também e barra de navegação. Então vamos retornar por enquanto apenas componentes de texto. Então eu vou ter aqui texto, e este texto vai segurar como o nome do aplicativo, por exemplo. Então eu posso dizer app Filmes. Assim, desta forma, teremos a navegação no topo para que não tenhamos que esquecer também de importar o componente de texto. Então eu vou ter aqui texto de React Native. Então agora nosso componente está pronto para a importação. Então eu vou para app.js novamente, e então eu vou dizer importar para mim a barra de navegação. Então dizemos aqui importar navbar da barra de navegação do componente. Então é exatamente da mesma maneira que fazemos com os outros componentes. E aqui no cabeçalho, no retorno de chamada, vou chamar a própria barra de navegação. Então agora, quando salvarmos ou podemos fazer esta chamada como uma chamada lateral. Para que possamos ter aqui este lado. E então quando salvarmos e vamos a um dos filmes, por exemplo, este. E foi ele que teremos o título no topo e dentro da área segura. Então precisamos ou fora da área segura. Então precisamos colocá-lo de alguma forma na área segura. Que você pode fazer isso facilmente e chamar um componente que é chamado de área de visão segura, salvar qualquer um de vocês vem também de Reagir nativo. Então você pode usar esse componente depois de renderizá-lo. Então vamos colocar de volta este retorno e nós iria cercar o componente de texto com o componente que é chamado área de visão segura. Então teremos aqui o texto dentro daquela área segura. E como você vê, o título do aplicativo de filme é movido para a área segura. Portanto, a nossa aplicação não é conflitante ou o conteúdo da nossa aplicação, por exemplo, a navegação não está em conflito com a área segura como a laranja e o tempo, e também a bateria e o sinal. Então, dentro da área segura, eu vou nessa navegação. Vou ter um logotipo aqui. E também podemos definir algo como botão Voltar como era antes. E também podemos ter algum ícone para pesquisa. Mas no detalhe deste filme, só podemos ter um botão de voltar. Nós não precisávamos ter um surto e o local. Então só podemos ter um botão de volta. Então dentro da área segura podemos ter uma vista. E essa visão também será importada de React Native como vimos. E então teremos um botão, para que possamos usar um botão de opacidade tocável. Assim, podemos ter aqui opacidade tocável como vemos aqui. E tem propriedade que será na imprensa e voltar. Então agora temos a opacidade das tuplas. Podemos especificar ícone dentro dele. Então, também podemos usar alguns ícones da nossa biblioteca de ícones que temos instalado antes. Então, podemos dar este nome para este ícone pode ser um ícone de volta. Já peguei o nome da documentação. E o tamanho. Podemos especificar o tamanho do ícone, que pode ser 40. E também podemos dar alguma cor, que pode ser branca. Então podemos ter aqui cor. E então colocamos esse hashCode, três Fs, e então fechamos o ícone de um lado. Então agora o que precisamos importar é a vista. E precisamos importar também o componente ícone. Então importando componente ícone item da biblioteca que especificamos antes e usamos. Então vamos guardar isso e tentar. Legal. Temos aqui para o ícone opacidade tocável. Podemos clicar nele, mas não está fazendo nada. Então, pressionando essa opacidade tocável, podemos especificar e navegar para que possamos navegar de volta para a página anterior. Então eu vou dizer aqui na imprensa. E com esta compressa, será uma função de retorno de chamada. E nesta função de retorno de chamada, eu preciso especificar a navegação. Se você se lembra, não temos navegação aqui porque temos uma barra de navegação. Então precisamos passá-lo de alguma forma de fora deste componente. Então, de alguma forma, precisamos criar um adereço para esta barra de navegação. Então eu posso ir aqui novamente para o componente Navbar e criar um novo adereço, que pode ser chamado de navegação também. Então, antes de voltar, vou definir uma constante. E essa constante será um objeto porque precisaremos de outras propriedades, como veremos mais tarde. Vou chamar-lhe navegação. E esta navegação, teremos este ponto adereços porque estamos importando este ponto adereços e estamos usando-o como um adereço. E então aqui na imprensa podemos dizer como depois que temos essa função de compressão, precisamos executar algo que será chamado de ponto de navegação, voltar. E este método já está definido, o que me ajudará a voltar na minha aplicação para a página anterior. Mas antes disso, não precisamos esquecer de passar a navegação para o componente Navbar. E podemos fazer isso através de ab.js. E como você vê aqui, podemos especificar a navegação. E dentro desta navegação, podemos dizer obter a navegação de sua tela atual, como podemos obtê-la. Podemos obter a navegação da tela atual passando aqui na função callback, algo como ouro também, navegação porque tem um parâmetro onde podemos usar a diferença da navegação desta página de detalhes, para exemplo. E então eu posso passar por aqui. Então, vamos salvar tudo e, em seguida, tentar novamente clicar no botão. Certo, temos um erro. Este é um erro que eu fiz por propósito, porque eu quero mostrar-lhe como você pode passar, em seguida, a navegação do saldo como a partir desta tela. Então, quando você quer pausar a navegação, não é o suficiente para passá-la assim. Você tem que cercá-lo com suportes, com colchetes curvos. Então pode ser um objeto. Então você tem que ter muito cuidado com eles, como um colchete e como você pode especificá-los. Então, dessa forma, será trabalho porque será definido, a função callback será definida. Então, quando eu clicar neste botão, Ok, eu vou voltar novamente para o meu componente. Então, dessa forma, teremos um objetivo específico, como voltar botão apenas para o componente do detalhe, porque eu especifiquei que apenas para a página de detalhes. Não tenho para a página inicial. 53. Navegação em tela em casa: Ok, olá, hash de chave de Condenn e Navegação tem um sulfidril AAC. Um lado eu sou uma navegação me pediu uma subcabeça eo veado, os detalhes do filme antigo, mas ele então ele tem um 100 e que agora vai fazer navegação coração nos bater de como a UTI deu Morgan e teve seu próprio eu tem sido e navegação e muito mais seria um sub. Que tal você ver seu modo de navegação seria um detalhe que MOOC e nós temos 30 e componente partido dinâmico igual que tinha sido não só como SI, líder tinha ido principal para não principal, não estavam passando por 0. Falso. B tem um coração suave e Mozart ou para um pode entrar no nosso vivo. Como isso significa que dissemos adereços padrão ou sede que você faz. Não significa que tenha ido em torno de quedas. Ele tinha ido AC mais velho ainda, mas escondido em Auth0, o que digitando, digitando propriedades é até zed choco eidetic, e ir em frente e principalmente ido eu comprei em booleano. Governo é agora meio bloco tipos comando importante o suficiente estudo sono no lazer a partir de lá, ela vai quebrar Mirada eo que eles não gostam, homem inferno mau e certo homem Amaka e enganado, mão muito procurado em Lean e queda divs com adereços padrão o suficiente, mas você não vai obter uma amina. Ei, vamos lá, hackear, não vou ter uma barra de navegação, ponto quebrou divs foram barra de navegação, os adereços padrão foram lixados em hey, Althea para o meu adere tipo de Guan E componente j tem térmica obter isso para ter um corpo principal e por que qualquer empresa com ele? Eu não fui em frente do que eu. Iniciá-los no Azure, a barra de navegação árabe, MC que se uma barra de navegação e módulo de corpo de água quente que tinha R4 e todo o amontoamento de navegação desapareceu. Lemma principal no corpus de como o ACA ou meu pai legal, principal e mais ido ser um coração macio e encontrou um Derek gordo e R3, que a propriedade bar nav que eu sou um prop nodal para como o brilho conversa cai. Destaque o fundo suficiente de detalhe de bits iguais. Eu tinha uma equipe ensinada através de p-hat e barra de navegação. Milho alto chegou a 0 sobrecarga Gombe, um submarino AC. Mas mapas eidéticos e barra de navegação suficiente resolver implementação. Quando os velhos têm um não, BS teve um fácil em um inferno quando um piloto sobre ele, ele vai, mas você acha que eles vão obter gama e este tintura você, os incógnitas não precisa. Falso, não há limite se fez todo o componente adicionado para acordar através da Itália, ele por trás dele um sulfidril. Você se vê altura na tela inicial. E, em seguida, o componente no principal para como esse domínio, mas clique duas vezes em um botão e alimentação e se a gordura, se e a cabeça que significa que eu queria descartar Dudley, Alice tinha sido me disse logotipo e aplicação hospitalar. O que poderia um li uma busca para o dia com um objeto quente tudo no corpo principal em um tiro neste trabalho diff-amp, Danny, hey Ayesha em que este diff-amp habe Dann emitido se inline, se houver, célula B para o largo para Euler ou quão quente o coração realmente ruim tiro que é, o fundador tinha café highland principalmente através do coração novamente e força principal que uma linha direta por um tempo, não vê-lo muito. Se você tinha no Maine não pode forçar, mas ele então ele tem muito para ele para Bob. Oi, já foi. Entrevista o suficiente. Então Itália, que eram lamelas chamado principalmente Yanni falso e, em seguida, fazer em um domínio um sulfidril ACA marinhas de altura no método direto, em seguida,. Mas ele então IC e então minha mãe e metade acabaram. Ela deixou-o falar à volta deles. Gwas mostrado para a casa de teatro e teve o Mason na APA de um Hub. Olá, honestamente em uma luminária foi rejeitada por aquele Bob. E por que eles estão saindo as meias-vidas para o promotor, ele baba seu cabelo meio folha para Madelyn, encontrar um amigo, eu não vou obter um componente que oh, se mais amigo, amigo que ele pode qualquer um de vocês tinha altamente, se você não está cineasta principal tinha ido oposto de como eu vejo isso. Eu assumo e barra de navegação lutar contra isso. Quando se trata de um IE alto teor de gordura e IC que você iria em uma pequena viagem sub AC. Se eu tivesse, então poderia ter sido eles tinham componente de chumbo. Eu vou ver ele vai módulo que batimento cardíaco nos que um prêmio de hambúrguer ela Morgan e componente de saúde. E como tinha sido eu, solar triste e quente vai ficar ilhas logotipo tinha sido redefinido para como o logotipo e logotipo marido aplicação Debye. Em seguida, ele pode imagem componente. E esse componente de imagem ou eu comprei em como vê-lo como minha fonte e fonte MAC medida para este aggrecan não vai assar quando eu comprei no meu amor. Oh, você está dentro e meu esquerdo meu pé esquerdo é mais necessário. Bem, mas exigia RF e massagem, uma decapitação em casa e MLF. E eu sou o manifesto mas continente com logotipo de ouro, alguns agrupados com que ele pode y unidade. Quando ativos Magalhães pelo diádico e meio retrowardation quando 4D plotagem que como ativos para o bem ou ruim aqui é tê-los odiar imagem e imagem. Ele, I melhor e mais v de olhar PNG dentro dos meus furacões, se divertir. E eu tinha o meu lado. Eu tenho lei que agenda mudra até então um componente quente fora ativos para ácidos biliares e filmes. Imagem em filmes ponto PNG. Por um duro, não vai sair disso. Imagem ou logotipo. E barra de navegação, se você tivesse um AAC pelo pente de cabelo pode dominar uma imagem ou um anúncio ou queda ou importação, Reagir nativo para um amigo, Eu vou ser milho e Andi. Judy, seja ele. Ghani é tê-los ser perna lasanha autêntica e tem uma escolha mergulho para imagem ser um monte de gamma1, mas ele ainda não poderia tais pesos discagem de saúde este dyne bem agora eu sou um objeto aditivo estilos McDermott, que não estava à sua maneira, mas na folha de estilo, por que essa folha de estudo que eu tenho que adicionar uma classe é mais local. Mas ele então ele poderia riff e uma constante chifre lá. Qualquer vidro hidrogênico ou como componente digital e quantos anos. E eles são constantes. Quando eu comprei em estilos e fez um ADA weedy como dinamite em como componente soviético, amigo genético se dirigido componente, folha de estilo velho aqui e entendido um componente que é mais folha de diário agora vai criar. Criamos o cotovelo objeto em um copo entre a minha sombra. A Homicídios recusou. Para logótipo para milho alto. Eu comprei em largura, altura e largura. Um monte da cena em casa ou dor de cabeça ruim ou feno, milho e alta que como Amy disse. Vamos lá. Estou vendo que tinha ido mais longe que eu comprei no Logan. Ele acenou com a cabeça de novo. Por que em taxas LU menos ECA e eu vou importar essa folha de estilo. Amigo, não no logotipo. More Drew Michelle pode entrar com uma revista sobre abelhas Elliot, SHE, para o mal, hey cara, você não vai ter uma folha sobre nós se Danny uma imagem ruim para o método e nós vamos buscar ajuda. Um tesão aqui na borda ele fname para degenerar o gancho nele. Meu estudo, em seguida, ele pode tocável opacidade componente íleo e tinha que sabe. Sim. Então eu tive um monte deles OU eles tiveram opacidade tocável que eles têm Coursera trialistas tinha sido eu triste, Eu comecei com um grupo totalmente alelo. Os ícones de íon mandamento para fora da mensagem, delinear o que é o tamanho, 18, equivalente ainda. Mas Hickman pode funcionar feno e então eu tive que fazer um até Jack, Nevada e navegar navegar Allah do Dia D e mais tarde Hannah, eu sou Debbie, as regras da Nuvem, as principais idéias de como coordenar. E Sache, como tal, que os componentes de busca são OVNIs. Bem, eu disse que quase vimos um surto. Uma cama plana pode segurar a menos que problema de discagem quase vai ser styling. Eu não sei, um pensamento desordenado um pote em um local lá. E como você se lembra, fundo Janet, dados termodinâmicos tinham um anual ou não, Os anos Hustler morrem de fato por que eles decidiram D quanto maior o logotipo e, em seguida, o ADSR. Que engraçado que ele pode sair em estilo ser como ele é RF direta, estilos de comando, o que eu tinha conseguido meu filho e eu tenho em um domínio f. Mas lúmen tinha um nome principal, nunca ouvi falar de um ativo ou hostil como Mohak fez isso. Terá Huntley que tenha respondido. Ele viciou Oh, altamente em também chamado de fundo magenta para tudo que ela faz isso inflige ogiva para ter o mais velho revisão NACADA teve um filmes, dando-lhe conteúdo ou modelo ou uma mão em Adorno que V esteve no espaço? - Sim. O logotipo, um tesão, um espaço minuto de alta qualidade entre qualquer por que eu fechei ou eles não vão de qualquer maneira, que placa elisa. HIG ruim. E isso é tudo. Te vejo lá. Qualquer gordura externa e regenerar gargalo e saber como levantá-lo durante todo o ano. Em seguida, movimentos e alta qualidade é pequena, direção flexível da coluna. Isso foi um total de mão Danny Meyer coluna de canto oi, esse modelo e todos os outros animais, boneca, estudar ou o meio ou a empresa ADSR vai sair do estofamento e teve o Nevada e Schwann, como fora de uma camisa Você quantifica, incorporando Asherah, o que eu chamo vai explodir se a multidão que eles vão e eu vou ajudar minha bobina não vai pegar um peixe é alinhar itens, enviar essa foto. O acetil ser Shaquille, MALDI, Mozilla, e bop colocar um arnês sobre ele, Ghani, acima da borda honesta. O que eu afirmo. 54. Refatoração em terceira seção: Ok, nesta palestra vamos ver como podemos tornar como o app.js mais simples. Podemos mover algum código para um componente separado. Gosto sempre do superego das coisas para alguns componentes para ter uma base de código menor em meus aplicativos ou em meus arquivos. Então, para isso, talvez possamos mover todo esse contêiner de navegação para outro componente porque precisamos fazer algumas telas de carregamento e também erro quando houver algum erro na API, para que possamos mostrá-lo no aplicativo. Então, eu iria com a criação de um novo componente. Talvez eu possa chamá-lo de navegação principal. Então aqui posso dar um nome no componente. Podemos dizer o ponto de navegação principal js. E então podemos criar como um cara de áudio componente puro e criar o componente com um sem estado. Assim, podemos criar um componente puro aqui. Então vou chamar meus trechos, e direi componente puro, removerei esse estado. E também podemos cortar todo o conteúdo de like do contêiner de navegação. Como se não tivéssemos o contêiner de navegação. Nós obteremos apenas a pilha. Então, dessa forma, receberei apenas as duas telas ou a pilha Navigator. Então eu cortaria e depois colarei na minha navegação principal. E também vamos trazer de volta o que está faltando para nós, por exemplo, estamos perdendo constante, vamos obtê-lo. Aqui. Estou ensinando a fazer uma refatoração para as coisas porque, de outra forma, você terá um código complicado e você não poderá saber como lidar ou manter esse código. Então, precisamos também de algumas importações, como você se lembra, temos aqui para importar o React. Então, vou obter um React e colocar estender a partir de um componente puro. E também precisamos aqui ter algumas importações como veremos mais tarde. Então eu preciso, por exemplo, do Create Stack Navigator para que possamos levá-lo. E também precisamos das telas que componentes, que vamos usar como Verdes nesse componente. Então vou cortá-los e ir aqui e colocar importação, mas nosso componente em lugar diferente. Então, precisamos dar um passo para cima e depois fazer as telas, e então eu recebo a tela de componentes. E então também a mesma coisa para o detalhe. Mas aqui a barra de navegação de componentes está na mesma pasta. Então podemos simplesmente colocá-lo assim. Depois disso, economizamos. Ok, é, nosso código está formatado, não temos nenhum erro ou nenhum problema. Então aqui, em vez de ter todas essas tags, navegador e todas essas coisas, podemos simplesmente chamar nosso componente, que é chamado de navegação principal. Então, vamos importar a navegação principal. Eu direi clique em Importar. E então sem nenhum colchetes como aprendemos. Então, temos aqui uma navegação principal. Então eu vou pegar aqui componentes e depois me dar a navegação principal. Então, dessa forma, posso enrolar aqui na navegação. Posso dizer que me traga a navegação principal. E ele será fechado de um lado porque é um componente sem nenhum conteúdo. E agora aqui precisamos colocar esses de volta. Ou quando você quiser salvar automaticamente mais bonito, colocaremos, colocaremos todos esses suportes. Agora, nosso componente está funcionando bem. Então, quando vamos aos detalhes, ok, Nice. E como você vê aqui, temos um bug estático, que o cabeçalho ou o navegador ou o navegador principal ainda existe. Até eu disse que quando o detalhe da EDS não mostre para ele. E para esse problema, também precisamos adicionar algumas propriedades ao nosso navegador. Portanto, uma dessas propriedades que você precisa adicionar para não ter essa sobreposição da navegação principal dentro da navegação detalhada é chamada de modo de cabeçalho. Portanto, você precisa ter certeza de que está adicionando-o ao navegador de pontos da pilha do navegador. Portanto, o modo de cabeçalho pode ser definido para tela. Então você pode dizer que o modo de cabeçalho do aplicativo deve ser tela. Dessa forma. Como você vê, não temos mais essa navegação de navegação doméstica. Então, como você vê, todos nós definimos. Então, quando o aplicativo está chegando à tela inicial, ele está escolhendo a navegação, mas o principal é Drew. Então, dessa forma, a barra de navegação foi renderizada com base no principal. Se for verdade, ele mostrará o logotipo e também o botão Pesquisar. Se não for, então ele mostrará apenas o botão Voltar como você viu aqui. Então, agora estamos prontos com nosso aplicativo, como na navegação. Na próxima seção, veremos como podemos clicar nisso para navegar no OT na pesquisa, para navegar até a página de pesquisa e procurar amorfo. 55. Serviços em TVs de busca: Ok, nesta palestra vamos ver como podemos criar uma onda. Precisamos procurar um filme ou um programa de TV. Então, desta forma, eu preciso encontrar a API certa para usar isso. Então, se você vai para a documentação API, você vai encontrar algo que é chamado de pico. E em surto, você pode ser capaz de descobrir. Algo como pesquisar filmes e também procurar programas de TV. Então filmes de pesquisa terá alguma API específica que é chamado de filme de surto. E tem alguns parâmetros que você tem que passar. A mesma coisa está acontecendo também para surto de TV. Precisamos também ter SRD e, em seguida, dv. E então você pode passar os parâmetros como a chave API e também linguagem e página e também a consulta que é necessária para que a consulta, será a coisa que o usuário entrará aqui no aplicativo, e então ele obterá os resultados baseado nisso. Então vamos criar o serviço para isso. Então, para mim, eu vou ter como os mesmos serviços que eu criei antes. Então teremos aqui os serviços. Eu copiaria um desses serviços, então vamos copiar este e ir aqui. E então vamos chamá-lo de filme surto ou TV. Então eu vou te dizer por que nós, como podemos fundir esses serviços para obter. Então, dessa forma, pode ser chamado de filme surto ou TV. Então pesquise o filme e o DV. Para que possamos procurar os dois juntos. E aqui podemos dizer busca de filme ou TV por palavra-chave. Então nós podemos ter como algo, alguma palavra-chave ou uma consulta que vai passar como um parâmetro aqui, e vamos obter o resultado com base nisso. Então vamos construir nossa URL. Então, antes de tudo, precisamos de uma consulta, como vimos na documentação. Então, como você vê aqui, temos algo como ouro uma consulta. Assim, a consulta será passada também, fazer o aplicativo ou para a API através da URL. Então, para isso, eu preciso passar um parâmetro quando eu chamo esse erro é como a partir do aplicativo quando o usuário clicar sobre isso e ter alguns livros grossos. E então ele pressionará Pesquisar, então ele está passando a consulta. Então eu preciso ter aqui algo chamado parâmetro de consulta. E neste parâmetro de consulta, posso passá-lo através da API. Então, como podemos passar por isso. Se você se lembra, temos parâmetros como este. Podemos passar também uma consulta em vez disso, porque esses parâmetros exatamente, você pode passá-los através de uma URL. Então agora precisamos de uma consulta, e esta consulta será o quadrado que é passado para este erro é, então podemos ter aqui, então, ok, passar para mim a consulta valiosa. Então, dessa forma, eu terei minha API tendo essa consulta. Mas em vez disso, precisamos procurar, como você vê aqui. Se formos para cima, temos aqui surto de TV e filme do Serge. Então é exatamente da mesma maneira, mas isso é diferente. Então vamos colocar isso como busca. E agora estamos discutindo o tipo. Então eu preciso procurar um filme ou uma TV. Então não podemos ter também outro parâmetro aqui. Podemos dizer tipo. Então, e este tipo, podemos dar-lhe uma TV ou um filme quando estamos chamando o serviço. Então eu vou colocar aqui também, em vez de filme, Eu posso colocar parâmetro que é tipo. Então, dessa forma, meu URL API, o original, como você vê você terá barra de pesquisa e, em seguida, o tipo que seria filme ou uma TV. E então eu estou passando os parâmetros, o pedômetro, a chave API, como vimos, que tem este. E também a consulta que o usuário inseriu para encontrar algum filme ou TV. E então ele retornará esses dados como um resultado. Vamos ver que é lagoas na API como ele vai se parecer. Então, como você vê, temos aqui algumas páginas e também resultados e os resultados totais. Então, dessa forma, você tem aqui alguns resultados também. Então vamos colocá-lo nossos dados de ponto de resposta, porque isso é vindo de axiomas. Está voltando para outros dados. E então eu posso acessar esses resultados, adicionar, em seguida, ele será retornado com a API como este. Então vamos ter essa mesma coisa, filme, dietilo reforço, vídeo, e todas as outras informações que estamos recebendo aqui. Então agora o nosso serviço está pronto. Na próxima palestra, vamos criar a tela de pesquisa, e vamos usar esse serviço para exibir filmes, que encontramos no banco de dados. 56. Pesquisar a tela de filme: Ok, Depois de ter o nosso serviço está pronto, podemos criar agora a tela. Então eu vou para telas, criar uma nova tela. Vou chamá-lo de busca. E nesta pesquisa vamos colocar o nosso formulário onde o usuário pode procurar por componentes ou filmes. Então eu vou usar aqui componentes apátridas retornados como fizemos antes. Então, ele será chamado de Busca. E com a busca vamos retornar também, como alguma navegação em parâmetros. Então você terá aqui navegação. E também, retornaremos algum modelo, e este modelo estará dentro da área segura. Então primeiro precisamos importar React. Então eu vou dizer aqui, IMR importação Reagir para mim. Eu vou criar aqui nós agimos fragmento. Então eu vou ter aqui algo como fragmento de ponto React, e então ele vai estar dentro dele, nossa visão de área segura. Então nós podemos ter aqui salvar a área de visão. Mas eu gostaria de mencionar que salvar qualquer um de vocês, é melhor obtê-lo de Reagir nativo que de Reagir contexto de área segura nativa. Então você pode obter este componente de Reagir nativo dois não têm como alguns conflitos nos erros. Então aqui temos agora como visão de área segura, podemos criar como alguma visão, assim como por um exemplo. E dentro desta visão podemos colocar um componente de texto onde veremos como algumas mudanças acontecendo, gostaria de ter certeza de que nosso componente está funcionando bem. Então agora vamos importar a exibição e também os componentes de texto. Então eu irei aqui na importação de todos eles. Então agora precisamos navegar para esta tela. Se você se lembra, quando clicamos neste componente ou neste botão, fomos capazes de navegar para algo chamado tela. Então, o que eu preciso fazer para ir para a navegação principal e criar uma nova tela de pilha. Assim, da mesma forma que fizemos com a casa ou dentro dos detalhes, podemos copiar um deles. E então podemos adicionar uma nova tela de pilha. E esta nova tela terá um nome, será surto. E como eu disse, você tem que ter cuidado com os nomes. Então aqui teremos, bem como componente de surto, então precisamos importá-lo também. Então, como você vê aqui, ele é importado automaticamente e terá as mesmas propriedades como ele terá barra de navegação, e também terá alguma entrada de navegação e navegação. Então, agora vamos guardar isso e tentar. Ok, nós clicamos no botão Pesquisar. Certo, fomos até a tela de busca e agora está vazia. E tem aqui uma onda. 57. Formulário de pesquisa: Ok, então nossa tela está funcionando bem agora nós não temos nenhum problema. Nós só precisamos agora fazer um formulário onde o usuário pode inserir algum texto para procurar algum filme. Para isso, eu estou usando um componente que é usado e Reagir biblioteca nativa. E esta biblioteca nativa React tem um componente chamado de entrada de texto. E esta entrada você pode ter como algum estilo especial sobre ele, em Jane, o próximo evento, e também como algum valor. Então, no início e também é importar esses componentes para que possamos copiar esta parte aqui e ir para a nossa aplicação e substituir o texto aqui com esse componente. E também, teremos aqui essa entrada de texto importada de React Native. Também precisamos de alguns estilos. Então precisamos de Stein a entrada também. Então precisamos ter essa folha de discagem, como vimos antes muitas vezes. Então nós só precisamos ter alguma constante e podemos definir essa constante como uma folha de estilo e usá-la em nossos componentes. Então precisamos importar essa folha de estilo também de React Native. Mas como você vê aqui, há alguns eventos, então ele está usando essa data para isso. Então vamos usar essa data para isso. Então eu vou dizer que eu tenho um texto constante e um texto OnChange, e então essas apostas em andamento serão retornadas no estado. Então eu vou ter aqui, bem como alguns também constante e, em seguida, eu diria estado de uso. E esta data usa será importada de React Native. E também podemos dar um valor padrão como ele fez aqui. Então podemos dar como usar menos texto como algo como ou podemos dizer filme de surto. Então isso é como uma informação básica onde podemos fornecer para nossa entrada. E como você vê aqui, nós já temos a importação para que possamos trabalhar com ela. Então nós só precisamos empurrar a vista um pouco como ter também. Como aqui temos a flecha. Está totalmente no topo e está se sobrepondo com a entrada. Então podemos colocá-lo um pouco para baixo para que possamos dar, para este abuso algum estilo também. E eu chamaria isso exatamente da mesma maneira que estávamos fazendo antes. E vamos dar-lhe um nome que é chamado de recipiente. E este recipiente, eu vou colocar o estilo dele aqui. Então será exatamente o mesmo. Então podemos dar como um top de banda do topo para não ter o conflito que eu mencionei. Então nós temos, desculpe, hey, Apple colocou a coluna, então eu vou colocar aqui estofamento top e mau ovo dopa vai ser como cerca de 100 pixels. Podemos dizer, vamos tentar isso, ok, 100 é demais. Vamos colocar 60. Então 60, Ok, temos busca por filme. Então, e, em seguida, o usuário pode colocar algum texto dentro. E também precisamos colocar algumas informações como direção flexível, flare, centro, justificar o conteúdo. Veremos que mais tarde, quando teremos o botão enviar também. Mas vamos dar um pouco de estilo para que esta entrada se ajuste ao nosso design. Então eu daria em primeiro lugar como algo, podemos dizer limítro-raio. Podemos ter algo como 15. E podemos dar também largura da borda, algo rápido, dar como 0,5. Então nós podemos ter aqui em 0,5, nós não podemos dar tão bem alguma altura para isso. E podemos colocar alguma altura fixa ou você pode fazer alguma altura usando porcentagem e dimensões da tela. Então, não podemos dar como por agora, altura fixa porque não está afetando de qualquer maneira, quando você tem diferentes tamanhos móveis. Então vamos dar como, por exemplo, 50. E também teremos como algum preenchimento para empurrar o conteúdo dentro do gosto para não ser corrigido aqui ou exatamente nas bordas da entrada. Podemos dar algo como oito pixels para preenchimento. E também podemos dar um pouco de coloração para a fronteira e também algum fundo como você quer ou como você quer para estilizá-lo. Então, como você vê, nós temos como essa entrada, nós podemos mudar isso de estofamento top para ser apenas rebatidas. Então 60 é demais, então podemos mantê-lo como um top de preenchimento. Mas podemos colocar aqui estofamento primeiro. E estofamento será 10. E então colocamos o topo de preenchimento e, em seguida, o topo de preenchimento se sobrepõe sobre este preenchimento. Então teremos estofamento top 60, e de outros lados seria 10, 10, e de baixo, será exatamente como fazemos com HTML e CSS. Você pode adicionar, irá adicionar algumas outras propriedades que você pode ver na documentação. Há muitas propriedades para esta entrada. Um deles como algo chamado espaço reservado, algum valor padrão, editável ou não importante para preenchimento automático um monte de coisas. Então podemos também adicionar algo que pode ser chamado de espaço reservado. Então eu posso colocar aqui uma propriedade chamada lugar holder. E no titular do lugar você pode definir um texto padrão. Então eu posso dizer aqui, procurar por um filme ou TV, como este, filme surto ou programa de TV. Assim, desta forma, teremos espaço reservado e quando você remover o estado padrão, como quando temos como algum valor indefinido, então teremos este espaço reservado como este. Então você pode ser capaz de digitar diretamente. Assim, o titular do lugar mostrará quando não houver nada na entrada. Então, para enviar o resultado, precisamos também de algum botão aqui, como para o usuário que ele pode enviar o valor que ele digitou e, em seguida, ele vai obter os resultados dos filmes. Então, nesse caso, podemos segurar tudo isso, colocar essa entrada dentro de você. Então eu vou dar novamente outra visão e talvez possamos dar-lhe um nome como forma. E este formulário manterá para mim essa entrada de texto. Vou fechá-lo novamente assim. E então aqui, esta visão, vou colocar outro componente que será opacidade tocável, exatamente como fizemos com o ícone de pesquisa aqui na barra de navegação. Então vou colocar também aquela opacidade tocável, algo assim. E na imprensa não, não teremos uma navegação, mas teremos outra coisa para que possamos mantê-lo por enquanto vazio e podemos ter tão bem como ícone. Então precisamos importar várias coisas. Um deles é a opacidade tocável, que temos de React Native. E também precisamos importar o ícone e o ícone, podemos importá-lo exatamente o mesmo ícone que usamos na barra de navegação. Então eu vou colocá-lo aqui também. Então vamos salvar tudo e então vamos ver que, ok, o ícone está vindo aqui. Então precisamos de alguma forma mudar o ícone para estar perto desse componente. Então, vamos remover essa cor neste ícone para vê-lo mais claro. Ok, agora é preto. Então, precisamos colocar como algum estilo para este recipiente para manter a visão do formulário e o botão perto um do outro. Então, antes de tudo, irei ao estilo do recipiente e darei algumas propriedades. Uma dessas propriedades será direção flexível se você se lembrar de colocá-los perto um do outro. Então eu vou dizer aqui, direção flex será rho. Então, dessa forma, eles estarão perto um do outro, mas agora eles são AGI. Assim, também podemos alinhar os itens para estar no mesmo nível juntos. Então eles serão alinhados no centro. Então precisamos de alguma forma colocar esta entrada mais aqui e o botão Pesquisar deste lado. Então, a visão deste formulário, eu posso dar-lhe como algumas propriedades especiais, por exemplo, que podem ser capazes e nos ajudar a fazer algum espaçamento para essa entrada. Então, primeiro de tudo, eu vou aqui e dar um formulário, a classe de formulário que defini no topo, se você se lembra. E uma dessas propriedades será uma base flexível ser auto. E também precisamos de outra perpetuidade é chamado flex uma menina. E este crescimento flexível será um. E também precisamos ter algo como você vê aqui, estofamento, certo? Então podemos empurrar, o livro está um pouco longe da entrada. Então podemos colocar algum preenchimento direito, onde pode ser algo como oito pixels. Então, dessa forma, eles estão alinhados um ao outro. E também eles têm como, como se o botão estivesse aqui. Então, como você vê base flexível, é chamado Auto. Ele está dando como o flex para ser dinâmico deste formulário e obter o resto do espaço de com este item é reserva. Por exemplo, essa opacidade tocável é apenas reserva, digamos cinco ou 10 pixels. Mas aqui esta entrada levará o resto. Então, dizendo flex base auto e flex crescer um. Então isso significa que pegue o resto do espaço e o alinhe dessa maneira. E nós damos direito de rebatidas para não deixar esta entrada para ficar na opacidade tocável. Então, a última coisa que precisamos lidar como algo em apresentação. Então, para esse botão, opacidade tão tocável que ele tem pressionado e precisamos lidar com o onsubmit para isso. Então teremos algum método que pode ser chamado e enviar do valor da entrada que é inserido na entrada. E para isso em submissão, como rápido e torná-lo como letra maiúscula em Enviar. Posso defini-lo no topo. Assim, podemos ter como resultados e os dados serão sempre um resolvido e chamando o nosso serviço. Então, dessa forma, vou definir outra constante que pode ser chamada onsubmit e que será como uma função. E esta função retornará para mim algo como chamar o serviço que criamos antes. Então, por enquanto, eu vou para console.log o valor que eu quero obter da pesquisa. Então eu quero que o usuário coloque um parâmetro de consulta. Então eu quero que o usuário coloque alguma consulta e eu recebo essa consulta e eu passá-lo através do serviço como dissemos antes. Então podemos chamar isso como uma consulta. Então agora eu estou indo para o console log esta consulta também. Mas aqui não temos nada, não passamos nenhuma consulta. Então, dessa forma, vou usar este texto. Então este texto está mudando com base no texto de alteração ou no usuário aqui. Assim, podemos pegar este texto e passá-lo também para o nosso método onsubmit. Então vamos guardar isso. E podemos abrir nosso terminal para ver o registro do console. Então vamos fazer um pouco maior. E eu vou colocar algum valor, como podemos dizer aqui, filme. E então eu clico no botão Enviar. Como você vê, eu tenho o filme, um filme como este. Ok? Procure por exemplo, como um novo filme, algo assim. E eu estou recebendo o resultado em Submeter. Então agora eu vou usar seus serviços para pegar os dados e exibir que guarda aqui exatamente o mesmo componente de cartão que usamos na página inicial e outras páginas. Então, dessa forma, veremos que como vamos chamar o serviço na próxima palestra. 58. Resultados de busca: Ok, agora nesta palestra vamos fazer um modelo para exibir os resultados da pesquisa. Mas antes de tudo, precisamos chamar o serviço que é responsável por nos trazer os resultados da pesquisa. Então, siga que, se você se lembrar, criamos um serviço que é chamado Pesquisar filme ou uma TV. E está pedindo dois parâmetros, que é uma consulta e um tipo. Então eu vou colocar isso também chamado aqui. Então, quando houver a submissão, vou chamar este serviço. Então vamos ter algo como pesquisa de filme DV, que eu vou importar de serviços. Então eu vou colocar aqui Importação e então eu vou colocar o nome do serviço e, em seguida, antebraço. E então vamos colocar como serviços. E chamaríamos os serviços dessa forma. Agora temos o filme de TV. Então este filme de TV vai me pedir para ter dois parâmetros. Primeiro será a consulta, e o segundo será filme ou TV. Então vamos colocar, por exemplo, filme como agora. Então o que temos aqui, filme ou isso depende da API, como estávamos usando isso. Então ele estava dizendo, sim, ok, filme e TV, então vamos passar filme. Então agora isso vai me devolver uma promessa como vimos antes. Então eu vou vê-lo depois e depois disso teremos os resultados. Então vamos chamar como aqueles como um aumento, ou podemos chamá-lo como um dado. Estes são os dados de busca e esses dados nós vamos fazer algo com eles. E se você se lembrar para isso nós estávamos criando outra variável de estado. E esta variável de estado, estávamos usando no modelo. Então eu vou dizer aqui nós podemos dar como resultado de pesquisa e este aumento ou resultados, vamos torná-lo assim e, em seguida, definir resultados de pesquisa para que possamos ter bem aqui disse resultados de surto. Então, dessa forma, vamos armazenar toda essa inflamação no resultado da pesquisa. Então não podemos ter aqui definir o resultado da pesquisa para ser dados. Então, dessa forma, teremos os resultados ou a matriz que foram retornados da API com os filmes redefinidos ou definidos nos resultados da pesquisa aqui. Então aqui eu vou usar um modelo que vem dos resultados da pesquisa. Porque falamos sobre isso várias vezes e eu disse que temos várias maneiras de organizar todos esses modelos. Falamos sobre isso como quando está carregado, quando não está carregado e quando há erro, vou colar o modelo que já preparei. Não explique, e eu lhe darei o código. Então eu criei este modelo. Este modelo terá uma visão. Ele estará dentro da visão rolável e rolável. Então temos aqui uma visão que é chamado recipiente. E este recipiente manterá a forma e também aquela opacidade tocável. E então teremos outra visão onde teremos os resultados do item de pesquisa. Então eu criei aqui é u, se você se lembrar de algo chamado resultado da pesquisa. Então eu estou checando aqui. Se houver resultados de pesquisa e o comprimento do ponto dos resultados da pesquisa for maior do que 0, então eu tenho que exibir uma lista simples com seus cartões. Se você se lembra, já fizemos isso várias vezes quando estávamos fazendo isso. Guardas na página inicial aqui. Então você não tem que se preocupar com esse ponto. Apenas uma opção que eu tenho extra, É chamado de colunas num, que é como eu estou mostrando quantas colunas nessa linha. Então, por exemplo, no resultado da pesquisa, eu terei três colunas barril. Então eu não vou deixá-los como este rolável. Eu só vou ter consertado três no celular e eles são como se eu pudesse passar por eles. Então, você também terá essa propriedade de dados e renderizar item. Eu quero torná-los como um guarda. Eu não vou renderizá-los como qualquer outra coisa. E o componente de guarda que criamos antes, se você se lembrar de usá-lo na página inicial também, temos algo como extrator de chaves. Vai fazer como uma aceleração para a nossa busca. Então está indo e está relacionado a algo como jorrar. Então você pode usar extrator e você pode especificar o que é a chave. Portanto, será o ID do item ou o ID do filme que é retornado a partir dos resultados da pesquisa. E também quando há certos resultados, mas o comprimento é 0, então isso significa que não temos valores ou resultados que correspondam aos nossos critérios. Então podemos tentar palavras-chave diferentes. E também se não houver resultados de pesquisa, que é o estado inicial de nossa pesquisa, então eu diria que digite algo para começar a pesquisar. Então, depois disso, temos algum componente que é chamado de erro. E no caso de haver erro, então eu vou mostrar o componente de erro que criamos antes também. Então aqui temos como algum erro por padrão é dizer, algo deu errado, etc Então este é um modelo. Já falámos sobre isto tudo antes. Eu só faço alguns EFS diferentes, alguns comentários para você não ter, como qualquer erro ou qualquer erro. Todos eles estão na área segura de U. Ok, vamos para a busca e eu vou salvar meus resultados. - Legal. Temos aqui algo para começar a procurar. Então eu vou digitar como, por exemplo, Novo. E eu vou pressionar no botão Pesquisar. Legal, eu tenho diretamente, isso é alts. Então nós temos aqui algo e você mede e você groovy, et cetera. Então, quando eu clicar em um desses filmes, como você vê aqui, eu vou para o detalhe do filme. Então eu posso obter também que fazer a isca detalhe porque eu estou usando o cartão que Deus tem opacidade tocável que nós criamos. E quando você clicar nele, você navegará até os detalhes. Isso é muito bom. E este inferno, vemos que estamos usando a dinâmica de Reagir nativa da criação de componentes. Está bem, Legal. Então eu vou fazer o velho de alguém, que não é encontrado. Ok, ninguém é velho combinando com sua área. Tente encontrar nossas palavras-chave diferentes. Então, quando removemos tudo e colocamos como pesquisa, ok, Isso não vai responder porque não estamos enviando nenhum resultado e não temos nenhum resultado. Então agora temos o nosso modelo pronto com os filmes e os guardas. Há apenas uma pequena coisa que aqui estão os guardas são muito próximos um do outro. Para que possamos dar ao seu fundo de margem de guarda. Então podemos ir para aquele componente de guarda. E se você se lembrar que o componente de guarda tem algo chamado contêiner, que será a opacidade tocável. E no recipiente podemos dar-lhe um valor ou um botão de margem. Então não podemos dizer aqui margin-bottom, nós damos como cinco. Então, dessa forma , vão estar longe um do outro. Podemos dar-lhe mais, por exemplo, oito para ser mais perceptível. Então agora temos novamente a nossa API em execução. Está tudo bem. Então, dessa forma, temos o modelo de pesquisa. Nada pode você também não criar nada, não é? Assim como este? Eu tenho apenas uma nova classe aqui que é chamado de itens de surto. Eu dei preenchimento cerca de cinco, onde ele vai segurar o recipiente de itens de pesquisa apenas para empurrar o conteúdo um pouco longe do conteúdo aqui. Então não podemos ter algo novo. E então ele vai procurar por mim para não ficar preso nas bordas do formulário. Então é isso. Estes são os itens de pesquisa. Eu vou anexar o código deles na próxima palestra para que você possa usá-lo e descobrir se há como ele está combinando com o seu código. E você pode trabalhar nele facilmente sem qualquer problema e sem problemas. 59. Mesclagem filmes e resultados de pesquisa na TV: Ok, como você se lembra, criamos TV de filmes de busca e usamos apenas para os filmes. Então, se quisermos usar múltiplos, como precisamos de mu para filmes e TV. Como podemos fazer isso? Se você se lembra, nós estávamos usando algo que é chamado de prometido tudo. Por isso, é possível casar para mim múltiplas promessas. Então não podemos fazer isso aqui também. Então eu vou dizer aqui, ponto prometido, e depois Todos. E então eu posso ter aqui dois fundidos. E então eu posso ter aqui Serviços, casamento juntos. Então, primeiro, será a TV do filme de busca, mas para o filme e o outro com pode ser como para a TV de pesquisa de filmes, mas para a TV. Então, nesse caso, estou ligando para o serviço duas vezes para a TV e o filme. E então eu posso mesclar os resultados de alguma forma, porque aqui os resultados virão para mim como matriz de dois itens, se você lembrar, um é filmes e o outro é o visual. Então eu não posso dizer aqui como bem, Eu vou chegar aqui filmes como um primeiro gol porque eu procurei por filme e também eu vou chegar aqui dv. Então, desta forma, eu vou obter dois itens são dois membros aqui. Então, dessa forma, temos uma matriz para que possamos colocar todos aqueles entre parênteses para não ter qualquer erro. E então podemos chegar a esses dados, que temos aqui, e fundi-los juntos. Então podemos fundir filmes e TV juntos. Então, como podemos fazer isso facilmente para a fusão é bem simples. Podemos apenas fazer dados. Podemos definir uma constante que é chamado de dados. E esses dados serão mantidos como matriz usando operadores, como operadores de dispersão. Então eu vou ter filmes juntos e também as TVs. Então, dessa forma, eu estou mesclando dois arrays juntos para estar em um array. Então, nesse caso, quando eu salvar, eu vou obter os resultados deste ponto promessa tudo. E então eu estou fundindo-os em uma matriz. Então vamos estilizar o código um pouco. - Legal. Nós já fomos para serviço duas vezes e, em seguida, estamos mesclando esses dados e, em seguida, enviá-los para seus resultados de pesquisa. Então, nesse caso, vou procurar por algo aqui. Eu vou colocar em você. E então eu vou obter resultados misturados entre a TV e também os filmes também. E normalmente a TV estará no final porque dissemos aqui que queremos mostrar a TV depois dos filmes. 60. Tema com aplicativos: Pelo título desta palestra, talvez você saiba o que quero dizer? Quero dizer que podemos adicionar um pouco de coloração para nossa aplicação sem ter essas cores codificadas, que criamos antes em navbar e outros componentes, colocamos cuidadosamente com algumas variáveis onde eu serei capaz de alterar o tema da minha aplicação. Então, dessa forma, eu posso ter uma variável externa e posso ler a partir dela? E então eu configurei meu tema baseado em algo parecido com essas cores. Então, primeiro de tudo, podemos ir para os arquivos do aplicativo e criar algum arquivo que é chamado tema. Então, podemos criar pasta no nível raiz. Então eu vou dizer aqui como tema ou temas, podemos dizer. E dentro desta pasta tema, eu posso adicionar também como algo chamado cores. Então, nessas cores ponto JS, eu terei minhas cores de leitura aplicativo a partir deste arquivo. Então, dessa forma, eu posso criar também uma constante. E essa constante, eu posso dar um nome como cores. Então podemos dizer aqui const. E neste curso não podemos dizer que são cores e essas cores serão um objeto. E eu posso dizer dentro deste objeto que eu vou definir as cores que eu preciso para a minha aplicação. Então essas cores, eu já as criei. Como, claro, você pode criar suas cores como quiser. Então eu crio algo como podemos dizer, eu tenho, por exemplo, fundo, que será como este, preto, branco, cinza claro, cor primária também, que será este azul que temos para o botão Play. Assim, você também pode adicionar temas para o seu aplicativo uma forma que ele pode ser diferente de cliente para cliente. Então, depois disso, é melhor dar letra maiúscula para exportações. E então podemos exportar padrão, como podemos dizer exportação padrão, e dizemos cores. Então, dessa forma, poderemos importá-lo em algum lugar em nosso aplicativo. Então, depois disso, eu vou para o meu exemplo onde estávamos, nós fomos o suficiente bar no bar. Eu tenho, por exemplo, algum problema com a cor que é codificado. Tenho que substituí-lo por uma cor branca. Então eu vou aqui e eu vou ter aqui Importar, e então eu vou ter como, por exemplo, cores. E essas cores vem de cores temáticas como vimos antes. Então agora eu vou usar essas cores exatamente para colocar minhas cores dentro disso. Então eu vou ter aqui em vez de cor FFF, Eu vou dizer cores ponto branco, por exemplo. Então, dessa forma, meu aplicativo onde NDR no caminho certo que eu vou ter, a navegação será cor. Então, como você vê aqui. Então agora vamos colocar todas essas cores, por exemplo, para esta navegação em algum lugar aqui. E é claro que não podemos vendê-lo para todas as cores codificadas e colocá-las em nossa aplicação. Por exemplo, eu iria para o botão Reproduzir e então eu vou dizer aqui que eu não quero aqui, também cor, então eu preciso importar as cores também. Então eu vou ter aqui cores de importação, tema de cores. Então podemos ter também a mesma maneira como fizemos antes. Então, dessa forma, eu tenho aqui que as cores serão coloridas de branco e também a cor do botão. Se você se lembra, nós codificamos um pouco de cor aqui. Então também podemos colocá-lo com algumas cores, como uma cor primária. Então podemos ter algo chamado primário. E dessa forma, meu aplicativo terá uma cor primária dessa cor. Então eu posso usar a cor primária em todos os lugares no meu aplicativo. Então agora eu vou como aqui, duas cores que eu vou mudar, por exemplo, para isso podemos fazer um 000. E nesse caso, todas as cores usando essa cor mudarão no aplicativo. Então, dessa forma, você pode temar seu aplicativo de forma adequada sem ter um triplo, como você tem que mudar nossa cor em todos os lugares para ser o mesmo. Então eu não vou usar essa cor codificada. Vou usar apenas como as cores não primárias. Então, dessa forma, você só precisa mudar essas cores no caso de você querer entregar o aplicativo para outro cliente? Mas você quer mudar em algum lugar no layout e nas cores. Então, no final desta seção, você não verá como o código com cores codificadas. Vamos tê-lo como com o tema, mas não levar a venda tanto tempo na palestra. Então eu vou fazer isso rápido e anexar o código para você no aplicativo ou os recursos dessas palestras. 61. Correções de estilo: Ok, agora estamos em uma palestra onde vamos consertar o estilo. Então o estilo, como você vê aqui, nós temos alguns bugs. Então, por exemplo, aqui, o título está passando muito para o telefone. Então vamos consertar isso e fazer um trabalho fácil para esta palestra. Então agora eu vou ter que, eles estão, no mínimo, nós temos este texto e este texto, ele tem algum estilo para que possamos dar também, algumas rebatidas ao redor. Então podemos ter algum espaço em torno dele. Então não podemos ter algo como rebatidas em geral ou ruim em como este. E nós damos alguns espaços. Então, dessa forma, temos que movê-lo antes , porque, em seguida, adicionando botão seria tudo bori-lo. Então eu vou colocar aqui como dizer então, e vamos tentar para ver se está funcionando bem. Está bem, está bom. Acho que sim. Agora temos como melhor isso e podemos reduzir um pouco o botão de rebatidas para que possamos colocá-lo 15. Ok, eu acho que agora é legal. Ok, agora vamos verificar se temos outros bugs de estilo. Então podemos ir aqui e ver os olhos aqui. Nós não temos nada. Temos na navegação ou quando vamos para a pesquisa que temos aqui, a coloração deste ícone não é muito clara, por isso é ampla. Podemos colocá-lo como uma cor do meio, que pode ser cinza claro, por exemplo. Então tudo o que podemos ir para o aplicativo ou para a barra de navegação. E na barra de navegação usamos esse ícone. Então nós temos aqui conversa von de volta. Então aqui colocamos um cinza claro como este. Então podemos fazer isso como uma cor mais escura, por exemplo, você pode colocar três Cs, ok, bom. Agora é melhor assim. E também se formos a alguma página detalhada, tudo bem, ainda podemos vê-la. Ok. Sim, é bom. Ok. Outras correções de estilo, não temos outras correções de tapume. Está tudo bem. Nossa aplicação está funcionando sem problemas e facilmente, sem qualquer problema. E se você encontrar algum bug, seria ótimo relatá-lo para o Q e a e perguntas. Podemos corrigi-lo diretamente, e eu ficaria muito feliz em corrigir todos esses bugs.