Resumo da Transcrição

Então vamos... vamos aqui... só a gente tem dois componentes dentro de um... uma view e essa view tem flex direction row. O significado é que o eixo principal é aqui horizontal. Então vamos fazer a busco, o botão de buscar ter um quarto da linha e vamos fazer o caixa de texto ter três quartos, ocupar três quartos do espaço, tá bom? Então vamos aqui na caixa de busca. Vamos botar um flex três e no botão buscar flex um. Entendeu? A gente conta que tem dois elementos. Três mais um é quatro. Então vamos dividir a linha em quatro colunas e o caixa de busca vai ocupar três colunas, botão de busca uma coluna. Entendeu? É tudo proporcional. Então vamos tirar esse inspector e vamos também mudar aqui essa view que agora tá todo com o primeiro da align cell. O view que acontece. Tá aí. Então eu botei essa view, toda view pra ser a enlongada da unstretched e fiz o caixa de busca ter três quartos e botão de buscar um quarto da linha. Bom, aí. Agora vamos voltar aqui. Então a gente fez o componente da search bar, né? E vamos só associar esse text input com um valor, tá bom? Então o valor vai ser dentro do estado desse componente search bar. Desteite, vamos chamar a palavra chave. Vamos definir o estado, inicializar, iniciar o estado dentro da constructor, função do constructor, né? Constructor. Vamos sempre chamar super com as props e já são dadas. Depois disso, desde o state, inicialize, iniciar com o palavra chave. A gente pode botar um valor inicial, se a gente quiser, por exemplo, que desse jeito vai ser sempre cachorro, né? Mas vamos botar sem nada agora. E quando a vez que a gente mudar, digitar uma coisa, você vê que não funciona, paga tudo porque o valor tá ligado a essa variável de estado. Então a gente tem que botar onde change text. E quando a gente digitar uma coisa, vai chamar essa função que a gente vai definir e essa função vai mudar o estado para a coisa que a gente digitou, a nova coisa. Então vamos botar aqui uma função de flasher. Sempre o argumento é a coisa que você digitou, você pode botar texto ou qualquer coisa. Vamos botar texto e o que a gente vai fazer é só set state, né? This set state e a palavra chave, esse tá se referindo a search bar, né? E vamos dar um objeto pra mudar e vamos falar que a palavra chave é o texto que a gente digitou. Agora funciona, né? Então esse que argumento é a coisa que a gente digitou e esse argumento é dado como a valor, essa propriedade para a palavra chave que está dentro do estado e vai ser mudado. Como eu gosto de digitar menos, o que que eu vou fazer aqui? Usar uns artifícios do is6. Eu vou tirar esse texto aqui, eu vou botar a palavra chave, eu vou mudar o argumento pra palavra chave, tá bom? É a mesma coisa, né? Você vê aqui. E o que que eu vou fazer no is6? Não precisa falar assim se você tiver a mesma propriedade com o mesmo valor, o mesmo nome, pode remover. E aqui também você nem precisa de parênteses se tivesse um argumento. Bom, tá aí. Tudo bem aqui, tudo configurado pra esse componente da search bar, né? Próximo parte vai ser fazer a lista de imagens.