Resumo do Transcript

Então, a barra de busca, a lista de imagens e o item de cada lista. E o item, cada item da lista aqui. Vamos começar com a sorte barra, vamos só fazer uma coisa simples. Vamos usar um... Então, a sorte barra vai ter um input, caixa de texto, aqui. Se a gente vai fazer controlar esse input, vamos botar o tablava-chab dentro do state. Vamos fazer isso. Então vamos fazer um componente de estado. Vamos começar no import react. A gente vai precisar do react. Que é o framework, também é precisado do component dentro do react. Porque vai ser component de estado e vamos import outras coisas do react native. Nesse caso a gente vai precisar do text input, né? E talvez um touchable highlight. O botão. Ah, também precisar do texto, né? Text do botão. Vamos fazer a classe. Vamos chamar a sorte barra, né? Extend component. Sempre deriva do component, se for component de estado, vai ter a render, função render. Todo o componente tem. E vamos retornar ao template da função. Vamos botar um view. Então, como eu estou usando o view, vamos botar view aqui também. Agora vamos... O que a gente tem que fazer agora para ter esse componente disponível, disponibilizar esse componente no outros arquivos, é ter que exportar. E eu posso fazer aqui, export default search bar. Ou eu posso só fazer antes do que, port default class. Tanto faz. Então vou deixar lá. Pode fazer um break. Novo linha esquisar. Ou se não, deixa assim. Então vamos botar um... Vamos botar um text input. Aqui, né? Vamos botar um texto. A gente pode botar pesquisa de imagem como parte da sorte bar ou não. Eu não vou botar nada. Vou fazer... Vou deixar o pesquisa de imagem parte da cena, o componente da cena. E vou só fazer esse text input e o touchable highlight como parte do componente de sorte bar. Então vamos fazer aqui antes... Tem o text input e vamos botar um touchable highlight. E tem um text, né? Dentro buscar. Aí... Até agora não tem estilo. Então provavelmente não vai aparecer. A gente tem que verificar para... Na tela inicial, vamos botar lá, vamos voltar ao index. Aqui na view, vamos botar o search bar. Nela. Mas a gente tem que importar porque ele não conhece. Search bar, vai dizer, não é definido. Então vamos importar... Search... Bar... From... Onde é que está o search bar? Está dentro de componentes, né? E está... Se chama... Search... Bar... Busca, está aqui, tem um botão. Mas... Não tem estilo para nada, então vamos voltar. Talvez a gente dê um estilo aqui. Se quiser, a gente pode fazer um... Const Styles aqui. Ou não, pode por estilo inline aqui. Depende de você, vou fazer o style... Sheet... Create. E como a gente está usando o componentes styles, Sheet adiciona aqui. E vamos fazer... Vou botar styles... Sei lá, botão. Busca. E dá o estilo aqui. Vamos por order... Adondada. Vamos por... Vamos ver como é que aparece aí. O que aconteceu aí. Ok. Non-empty expression. Cheveja. Ok, o adicioner is still... Está aí. Não tem nada, vou botar um padding... 6. Tá bom, melhor que nada, a gente... Dá um retoc aqui depois. E todo torche, vou highlight... O que aconteceu? O que aconteceu? O que aconteceu? O que aconteceu? E todo torche, vou highlight... Também tem o on press, né? O propriedade que vai ser... Vai chamar qualquer função que é passada essa propriedade. Quando você clica, não está funcionando. Vamos fazer uma função de flash... E vamos só retornar no. Só para ter um negócio aí, para ver... Agora o botão funciona, mas não faz nada. E vamos só ajeitar o text input aqui. Vamos pôr o styles. Style, propriedade de estilo. Vamos pôr os styles. Vamos pôr, sei lá, busca. Cacha... Cacha de busca. Cacha de busca. Não esqueça da vírgula aqui. Vamos pôr também... Um... Se bem que eu podia reutilizar os styles... Estou botando o mesmo estilo, poderia também... Ou mesmo... Talvez... Pega esses caras e ponho outro estilo. Aí, se você quiser usar... O estilo... Talvez eu faça isso agora. Mas deixa eu terminar isso. Então, vou botar a borda e vamos botar uma height. Só para ver... O que está aí, não é? Está aí. Cadê? E agora... Está dentro do anvil. Mas a gente que é aqui, esses caras... Sejam lado a lado, horizontalmente. Se lembre que, com Flexbox... O padrão do React Native vai aparecer... Flex Direction... Column. Então, vai ser... Linha por linha, então vou mudar para... Flex Direction Row. Então, para tudo na mesma linha. Então, vou botar aqui... Vou botar inline, tá bom? E não vou fazer estilo para esse, vou botar aqui... Flex Direction... Botar Row. Só para você ver o que acontece aqui... Está aí... Ah...