Resumo do Vídeo: Introdução ao React Native

Oi pessoal vamos continuar a aprender de uma introdução react native. No vídeo passado a gente viu aqui adiciona uma imagem na tela do seu aplicativo usando o componente image e também aprendemos a fazer um botão sensível talk usando o componente touchable highlight. No último vídeo também aprendemos sobre o estado de um componente state e também das props, propriedades que são dadas aos componentes que são escritas aqui do lado do nome do componente. Tem essa style, on press, essas são propriedades, são dadas ao componente. Agora vamos continuar, vamos aprender agora como lidar com input, a gente vai aprender a fazer usar o componente text input esse aqui, vai no documentação do react native, vamos aprender usar o text input para permitir o usuário a digitar qualquer coisa, a gente vai fazer o aplicativo fazer alguma coisa baseado no input dado. Vamos lá, vamos criar a primeira coisa que você faz, adiciona o componente lá no topo do arquivo, estamos em index.ios.js, vamos adicionar o componente na lista de imports, vai importar. A text input sempre põe uma vírgula só de precaução, o que é que deu errado aqui? Deu erro, linha 29 coluna 32, linha 29 coluna 32, coluna 51, 32, deu erro aqui, ah não tem esse negócio, tinha do último vídeo. Vamos esperar, cliquei no negócio acidentalmente, vai demorar um pouco. Então a gente vai usar o text input para permitir o usuário a digitar qualquer coisa na tela, é como se fosse formulário no HTML, o input text, ok, tá funcionando agora vamos adicionar aqui o componente, vamos pô, antes desse botão aqui, tem que o touch ou highlight, vou botar um espaço aí, vamos pô, primeiro põe o nome do componente, text input, nesse caso esse componente não precisa de outra tag para fechar, pode fazer só em um, vai aparecer nada agora, né? Porque não tem nada, a gente pode botar um placeholder, propriedade, que vai aparecer o texto lá na cadeis, vai aparecer no porque não tem estilo, vamos pô um estilo aí, esse é um, vamos criar um estilo, não pô sei lá, input text, vou criar um estilo input text, vamos lá embaixo, no style sheet, vamos adicionar input text, aí o nome da propriedade, estilo, vamos põe o objeto com a definição, vamos botar um height para altura, vamos botar sei lá, 25, vamos ver o que acontece, salvei e atualizo automaticamente na tela, tá aí apareceu agora, então você põe o input text, por padrão, se não tiver estilo vai aparecer nada, e você não sabe por que, porque não definiu o estilo, se não adiciona um estilo, botar um altura aí para ver o que o negócio está ali, aí você clicar lá, dá para digitar alguma coisa, eu digitei rápido, mas ainda não tá parecendo, tá muito feio, vamos adicionar um, sei lá, uma border, uma border aí, salva e ver o que acontece, tá lá, vamos botar um padding, padding, tá melhor, vamos ver, e agora, que altura tá, ok, tá bom agora, eu tirei a altura, que tava, detalhe, que é isso, vamos ver, se botar 50, tá aí, eu mudei a altura para ser maior e agora dá para ver o que está dentro, então padding de 12 em cada lado aqui, padding aqui, padding no topo, no bottom e o right aqui, vamos ver, então você pode digitar qualquer coisa, aí você pode associar essa caixa aqui de texto a uma variável, nesse caso vamos ao estado para associar essa caixa com uma variável, vamos ao estado do componente, então, o que eu quero fazer, quando eu digitar qualquer coisa lá, eu quero mostrar a mensagem que eu digitei, é o mesmo tempo, antes dessa imagem aqui do react-native, entendeu, quando eu digito aqui isso, oi, tudo bem, ah, fail water complete, deixa aí, quero que apareça aqui, como é que a gente vai fazer isso, então vamos ver, se eu quero botar esse cara que eu digito dentro do estado aqui, para a gente fazer isso, vamos dar a propriedade, auto tax input, tá bom, primeiro quando você digita alguma coisa, a gente quer que mude o estado da propriedade que a gente vai chamar, sei lá, um texto por exemplo, vamos lá, aqui bota on change, deixa eu só olhar aqui a documentação, no react normal é on change, nesse aqui é on change text, tem que adicionar text, vamos lá, on change text, aí você põe o que é que você quer que aconteça, quando o texto do input mude, ok, nesse caso eu vou pegar o texto que você digitar e eu vou setar o state, mudar o estado e vou botar o texto, vou dizer que é esse texto aqui, então vou criar uma propriedade no estado, chamar o texto e é a coisa que eu digitei aqui, que é associar com essa argumento, vai ser dado como valor, entendeu, vamos ver o que acontece, vamos botar aqui antes da imagem, vamos pôr um texto, component text e vamos associar o valor com o texto que tá dentro do estado, entendeu, sempre põe esses negócios aqui, curly braces, chave, sei lá, vamos lá, então quando eu digitar alguma coisa, vamos ver, ah, esqueci de botar o v, não se esqueça de sempre pôr a palavra chave, v, quando você chama funções, v se refere ao componente, que é o primeiro projeto, então esse componente priorito projeto tem um estado e a gente tá mudando o estado do componente, vamos salvar a atualiza lá e vamos trantar novamente, olha aí, tantando outra vez, ah, fica me corrigindo essa coisa, odeio, mas tá ali, né, esse negócio auto corrigiu, aí muda, quando eu mudo essa caixa de texto, muda lá no topo, porque o topo tá mostrando o valor do texto que tá dentro do estado e quando eu mudo o estado aqui, cada vez, oh, desculpa esse, cada vez que eu mudo o texto da caixa de texto, chama essa função aqui que seta o estado, muda o estado pra a coisa que eu digitei, tá bom?