Resumo do Vídeo sobre React Native

Fala galera! No vídeo passado a gente aprendeu como rodar aqui primeiro aplicativo, móvel usando o React Native. A gente aprendeu sobre portação de módulos, fazer uma classe para definir um componente e dos estilos aqui, feito pelo componente Style Sheet. Só eu lembrei de que o estilo no React Native usa o Flexbox, que é o modelo para estilo que é diferente do Box Model, o modelo de caixa que já é usado há muito tempo na web. Flexbox, guia. Fala, eu lembrei de que todo o componente definido com a classe que vem do ES6, o ES6 é nova versão de JavaScript, que inclui classes. Clases aqui, classes. E cada componente tem que ter no mínimo a função Render. E você sempre retorna o template, com o que você deseja que esse template apareça na tela. Neste vídeo, vamos aprender sobre outros componentes que já são dados pelo React Native. Vamos falar de images, o image componente para imagens, para botar imagens no seu aplicativo. E vamos também aprender como é que põe um botão, como é que põe um touchable highlight. A gente vai aprender touchable highlight, tudo no talk. Você toca a tela, não é, se chama botão, não. É um negócio que toca a tela, o elemento que toca, touchable, tocar. Então vamos começar com a imagem aqui. Se você for na documentação React Native, só lembrei de que essas séries de vídeos usando o React Native versão 0.32. Então, o React Native muda muito rápido, porque eu já tenho tecnologia que foi lançado em 2005, ano passado, isso é muito nova. Se lançaram agora, então, muda muito. Só a versão nova, bem quadra, acho que é toda duas semanas, não sei o que que veio lá. Então, vamos ver o que o Mac põe a imagem aqui. Aqui eu tenho minha aplicação, eu rodei meu projeto aqui. Se você lembrar, eu tenho um projeto aqui, primeiro projeto, meus arquivos. A gente está focando no iOS, plataforma iOS da Apple. Estou usando o Mac como sistema para assinar aqui, para fazer o projeto e você tem preciso de Xcode. Eu já abri aqui, eu rodei o comando React Native Run iOS para rodar uma aplicação no iOS, meu simulador aqui. Então, aqui meu código, vamos remover essas coisas aqui, é muito... Coisas, vamos deixar só a view lá, o componente view, que é como se fosse a div, div no HTML, na web, agora não tem nada, né? Vamos ver se o live reload está habilitado. Esse terceiro coisa está habilitado, então vamos continuar, que vai atualizar automaticamente. O que eu quero fazer é te introduzir a imagem, né? Primeiro de tudo, quando você quiser usar o componente do React Native, você tem que importar, né? Então vai lá para o começo do arquivo, adiciona o componente, nesse caso é um componente image, que já vem do módulo do React Native, e vou adicionar aqui, né? Sempre goste de pôr uma vírgula aí, porque às vezes a gente se esquece, então só de para cá está sempre por pôr uma vírgula, nem que seja a última coisa que aparece no objeto do JavaScript. Isso não precisa de vírgula, mas eu gosto de pôr. Vamos pôr lá, já temos o componente, agora vai estar disponível aqui para a gente usar no nosso componente aqui, primeiro projeto. Esse aqui é um componente também, é o nosso componente que a gente criou. Agora vamos botar aqui as tags, esse aqui, se você se lembra, o que se chama o JSX, JSX, que parece HTML assim, as tags, tags HTML, mas na verdade isso são funções do React, que parece que a gente, o visual parece que ser tags e é muito conveniente para a gente, fica mais fácil de programar assim, eu gosto de JSX, né? Então vamos lá adicionar o image component, né? Nesse caso esse componente aqui não precisa de fechar a tag, você pode fazer isso, mas é perca de, eu quero digitar isso, mas fecha aqui no mesmo tempo. São um detalhe que sempre no React você tem que fechar, nem que seja um tag que não precise de tag de fechada, tem que fechar com esse caráctere do slash aqui. Aí a gente tem que dizer onde é que está a imagem. Vamos ver, a gente usa as forças, ok? Tá bom? São detalhes no HTML a gente usa SRC, SRC, mas aqui no React, a gente pode like, React Native. Isso aqui é chamado propriedade do componente, HTML a gente chama attribute, a gente chama tag, o elemento, essas coisas e atributos, mas na verdade no React a gente chama isso aqui o componente, isso aqui a propriedade, a gente está passando a propriedade para o componente image. Vamos passar aqui uma imagem que eu salvei aqui, vamos ver aqui, eu salvei uma imagem aqui, essa aqui, e eu botei dentro do meu projeto aqui, está aqui a imagem aqui, React Logo, entendeu? Está aqui. Aí já tem local, na imagem local, se chama React Logo, ponto PNG. O que a gente faz aqui, a gente faz um require e põe ponto, põe o slash ali, e põe o nome da imagem, React Logo, png. Se está no mesmo diretório, eu põe esse aqui, tá bom, não se esquece, e põe require. Agora vamos ver o que acontece, se eu pôe esse aí, está atualizando automaticamente, já está lá, essa imagem aí. Note que quando eu uso uma imagem que é local, não precisa definir as dimensões da width and height, que é definir altura e comprimento, não precisa for imagem local usando require, mas ainda assim, é uma imagem muito grande, então a gente tem que aplicar um estilo aqui para deixar a imagem menor, vamos fazer isso. Então vou fazer um style, e vou dar uma propriedade, HTML a gente chama atributo, mas no React, React a gente chama propriedade. Vamos fazer aqui na folha de styles, style sheet, eu vou fazer os styles, eu estou fazendo referência a isso aqui, e vamos chamar de imagem, vamos definir aqui, vai lá no final, vamos definir imagem, aí dá um object, botar uma virgula só de precaução, vamos definir a width, que vamos ser, talvez uns, vamos ver, 200, e vamos definir uma height, vamos botar quadrado aí, vamos ver o que acontece. Olha aí, são quadrados aqui 200 por 200 aqui, está bom aí, se você quer mudar aqui o que acontece, fica mais só. Vou botar para quadrado, estou está aí, definiu a altura, o comprimento e width and height. E é isso como se adiciona uma imagem estática, já está presente no seu computador local, só adicionar o required aqui, aí passa o, onde é que está a imagem, nesse caso está no mesmo direitório aqui, e eu ponho o ponto e o slash aqui. Vamos agora ver como é que foi a imagem do, usando o link, se a gente tivesse imagem, que vamos ver essa imagem,