Markdown Summary

do botão entre as tags, né? Vamos lá, vamos botar aqui. Eu vou tirar esse barra e vou botar barra, botando aqui e vou botar o texto. Eu vou de botar o quê? Eu vou botar entrar, tá bom? Entrar, vamos lá. Tá aí, aparecendo o botão. Deixa eu clicar para aparecer nada, né? Fica só um pouco branco, assim, transparente, mas não acontece nada porque o WordPress retorna novo. Então, vamos ver o estilo aqui só para dar uma revisada. Então, o estilo do botão é button style, que a gente aplicou para o tote ball passage. Tem uma borda de 1, que esse cara aqui, e é redondado em radius de 4, né? Eu sei notir que não é retangular, a borda é redondada, redondada, retangulares, tá bom? Dentro do texto, do botão aqui entrar, a gente deu a line self center para centralizar esse texto, tá bom? Em vez de aparecer aqui, na esquerda, aparece no centro. E também é negrito e com fonte 18. Se você quiser adicionar mais style, por favor. Agora, com o botão, talvez a gente adicione um padding para não ficar tão grudado como os bordos, então, vou botar no button style. Talvez um padding no topo para ver 10, padding no bottom de 10, vamos ver o que acontece. Em cima e embaixo, né? Aí tá melhor assim, né? E aí? Como esse botão tá grudado aqui no direita esquerda, se você quiser botar a margem, margin left, de, sei lá, 4, 5, 6, 5, margin right, 5 também, para não ficar colado com a tela, o lado da tela, tá? E um pouquinho de espaço. Você pode também definir a color de fundo com black ground color e assim por diante. Eu vou deixar assim, talvez a gente mude o estilo depois, quando a gente precisar. A gente fez o botão, agora a gente vai fazer os outros componentes, o input, por exemplo. Antes disso, botão aqui de cadastrar, como a gente tinha no nosso wireframe, entrar e cadastrar, tá bom? Então, o que eu vou fazer? Eu vou aqui, eu vou tirar esses negócios aqui, ou talvez deixe aí só para ver o que acontece e botar cadastrar. Copie aí, senão, copiei o button, on press, não tem nada ainda, e tá aqui o texto. Não é que tá grudado, a gente vai lidar com o estilo depois, tá bom? Vamos lá, vamos fazer um input agora. Esse input vai ser o cara que, a caixa de texto, né? Vamos lá, import, react, from react. Vamos fazer com que funciona agora, tá bom? Vamos lá. Input, vai ser props, tem algumas propriedades injetadas, retorno o estilo, no estilo, vai ser o template, né? Algum coisa, a gente vai usar o text input, tá bom? Vamos usar o text input. Descaso e vamos lá. Export, default, input. Coisa assim. Então, vamos importar text input, que a gente ainda não tem, do react native, né? Dentro do modo do react native, destruturar o text input. No modo text input, o text input tem um key. Em várias opções, a gente pode adicionar, tem placeholder, tem o estilo, tem um value, one change text, né? Mas o que a gente se importa é o mais é esse key, é o value, né? E é o on change text. Então, toda vez que a gente diga alguma coisa nova, chama essa função que é on change text, que é vai se passar com propriedade. E o valor, a gente pode ligar ou linkar o valor desse caixa de texto com alguma coisa, alguma variável. Tá bom? Nesse caso, eu vou passar como props, então vou botar props.vari, e props.onchange text, tá bom? Deixa eu aumentar a tela pra você. Então, como eu tô usando props.algumc coisas, props.out, mais de uma vez, eu talvez destrutura dentro do props. Então, em vez de falar props, eu vou destruturar o value, onchange text, assim, em vez de tirar isso, eu vou remover. Eu apertei comando D no Atom, que eu tô usando Mac, pra acelercionar os dois no mesmo tempo, e dela tá. Tá bom? Então, vamos dar um estilo também, style, style.algumc coisas, sei lá, input style. Como essa linha já tá ficando longa, eu vou quebrar em múltiplo. Quebrim um, adiciona de intentação, assim, o diante, esse cara aqui vai ficar alinhado com esse text input Open Tag, do abrir aqui, que eu tinha abrido. Tá bom? Vamos lá, adicionar o estilo, vamos const styles, vamos usar styles.setup.create, passo um objeto, e com o estilo, input style, forward style. Ainda não sei ainda mais, quero importar esse cara dentro do reactnative, importado do reactnative. Tá aí, salvar. Vamos definir esse estilo aqui, sei lá, o que a gente quer? Vamos adicionar um font size, sei lá, botar um era 18, né? Vamos botar 20, sei lá, o que acontece? Ah, desculpa, não, é, 20. Vamos ver se parece alguma coisa. Não tinha borda, né? Ah, porque a gente não usou ainda, tem a gente definiu o componente, vamos lá usar, vamos lá, o dog inform, importar aqui, import, input from common input, né? Fiz ok? Vamos usar aqui, antes desse botão que eu botar input, not to precis to do value também, precisar o value, alguma coisa, vou dar um change text, alguma coisa, né? Sei lá, vou estar alguma coisa aqui só pra ver, alguém, email, com, um change text, nada ainda, vou estar no, função retorno. Então tá aqui, alguém, email, com, sei o que, mas parece que não a gente tá nada, porque tá, então a gente tem que definir a altura do componente, se você quer botar um height, vou ver se o que acontece, botar a altura de 30. Eu botei, vou no input, no estilo, botei uma altura só pra ver, tá bom? Então agora tem uma altura, você note aqui, agora dá pra digitar, né? Você note que quando eu delato, ele volta o valor anterior, porque o ontem anti-text não tá definido e o valor é sempre a constante, alguém, email, com, que a gente passou, sempre esse valor. Pode adicionar height, tem também esse line height, quero ver o que acontece, vou botar um line height aqui de 30 pra ver se dá no mesmo. Então flex 1, ainda tá um problema, né? Qualquer maneira, eu removi isso, deixa o line height aí, botar de volta pro height só pra ver, a gente pode mudar o estilo depois pra ficar melhor. Se quiser isso não, pare pro esquerdo e direito também, como a gente fez o botão, pode pôr, tá bom? Padding left, quanto é que a gente pôs? Vamos botar aqui, padding left, ah 5, ó, ah, sei, ok, aqui na verdade é o padding pra dentro do caixa de texto, se tivesse uma borda ia ficar muito colado com a borda, se quiser adicionar isso, vou botar um 5, 5 também. Ah, esqueci de o quê? Padding right, ah, fiz um erro aqui, né? Type, erro de escrita, né? Aí tá melhor aqui, zulke, tem um padding ali, nem que tenha borda, não dá pra ver, mas é melhor. Então tá funcionando, a gente volta pro estilo depois, tá bom? Mas uma coisa que a gente tem que fazer, vamos voltar aqui, a gente nota que tem esse etiqueta aqui, level do lado do estilo, a gente pode fazer separado ou pode botar tudo dentro do input, depende de você. Então o que é que eu vou fazer? Vou botar junto, tá bom? Se a gente passar como propriedade nesse level aqui, a gente vai adicionar do lado desse cara. Como a gente vai fazer isso? Vamos voltar aqui, do lado do text input, eu vou botar um text, que vai ser o level, né? É etiqueta, sei lá, vou botar email aqui, mas a gente vai mudar antes, a gente vai pegar isso do propriedade. Então a gente vai chamar esse cara de level, note que a gente tá retornando dois componentes, isso não é permitido no react, você tem que retornar somente um, então vou botar um view pra botar esses dois caras, e agora a gente tá retornando somente um view, mas tem vários dentro, então tem que pôr view se retornar componentes múltiplos, né? Na gente, esse texto aqui, a gente pode pegar da propriedade, então vou fazer uma propriedade chamada props, vamos passar o label, tá bom? E vai ser do props label, eu vou reenvoie esse props, destruturando aqui, eu vou botar o label. Também se a gente adicionar style, styles, vou botar label, style, por exemplo, label style, ah, esqueci de botar isso, de adicionar os curly braces, não vai substituir o valor da variável. Vamos definir o style, label style, sei lá, vou botar um font size de que? 20 também. Se quiser adicionar padding ou alguma coisa, sei lá, vou botar padding. Left, 20, vamos ver o que acontece, vou atualizar, tá bom? Mas não tem um label, então vamos adicionar, vamos botar no login form. Vamos do login form. Esse cara tá ficando muito long, então vou quebrar em nines separados aqui, tá bom? Vou botar aqui label, vai ser alguma coisa, sei lá, qual era aqui, email, email. Salvar, vou atualizar. Ah, view not defined, você já sabe que é o problema, né? Esquecemos de importar, vamos botar para o input, a gente não importou o que? View, primeiro é esse. Nós também que a gente nem importou o text, que nem chegou ainda, que passou aqui. Então vamos botar view e text, do react native. Salvar e vamos ver. Aí, pareceu o email aqui, o texto e pareceu a caixa de texto para digitar. O problema é que eles não estão lado a lado, né? Por quê? Vamos aprender, descobri no próximo vídeo.