Resumo do Transcrição

Então, essa página vai ser a página do formulário. Esse cara aqui, essa cena. Como a gente vai precisar amazenar informação sobre o e-mail e a senha, a gente vai ter que usar o application state do Redux. Por causa disso, vamos definir esse componente como componente de classe. Tá bom? Então, vamos começar. Import React. Vamos React, mas como é componente de classe, vamos também importar o componente que está dentro do modo React. Vamos distruturar assim. Vamos definir a classe. LoginForm, que é o nome do componente, sempre extends component para derivar o componente. Vamos definir a função render, que é presente em todos os componentes de classe do React. Sempre retorna o template. E vai ser alguma coisa. Vamos só pôr um alvio aqui e dizer... esse é o form de login. E alguma coisa mais. Só para servir de placeholder. Vai saber que está funcionando. No final, vamos exportar export default. LoginForm, exportar o componente. Então, assim, não vai dar problema com o React Native Router. Ah, deu erro aqui. View is not defined. View não está definida. Por que? Porque a gente esqueceu de importar os componentes view e text do React Native. Então, vamos lá, import. O que? Vamos distruturar view e o text que está dentro do componente React Native. Com isso, vamos lá e atualizar novamente. O senote que está funcionando agora. Só para você ver o que é que o navegador, o React Native Router flux está fazendo aqui. Então, eu vou para o arquivo Router. A cena inicial é login, não é? Componente loginform apareceu aqui, mas também apareceu essa barra com o título. Na verdade, porque eu adicionei esse title login. Se eu remover isso, salvar, vamos ver o que acontece. O senote que é barra ainda aparece, mas não tem nenhum título. Então, vou voltar, dar o login. Esse cara é o que aparece aqui. Centralizado na barra, o título, no header. O senote que o conteúdo do formular está de trás da barra, aqui, header. Então, para consertar esse problema, um jeito é de você ir no Router, no componente que a gente definiu, e adicionar a propriedade aqui para o componente Router. Eu acho que sim, style, para adicionar um estilo. Está vendo um espaço de, antes do componente, por exemplo, pode assinar padding top de 65. Nesse caso, esse objeto, objeto com estilo, eu estou adicionando padding para o topo. Então, do topo, vai adicionar um espaço de 65. Vou salvar, ver aqui o que acontece. Agora, a gente vê tudo que é parte do login form, esse é o form de login, e assim por diante. Então, agora está tudo legal, deixa eu checar o emulador do Android. R e R. Aqui também está OK, embora que tenha mais espaço aqui para o Android, mas está OK para o iOS. Acabou? Então, agora vamos definir também a cena do main. Vamos lá para o main. Main, como é o componente que não tem nada. Talvez a gente pode começar com o componente funcional e depois fazê-lo um componente de classe. Não sei, agora só tenho um mensagem bem-vindo para esse componente main, então só vou fazer isso. Import React, componente funcional, com React. E vou dar const main para o nome do componente, definir a função de flash, retorno templates, nesse caso é só um texto. Bem-vindo. Pois assim, pode botar um view se quiser, mas eu só vou deixar o texto aí. Export default main. E, só isso, né? Salva. Então, oh, também esqueci de importar text do React Native. Import text from React Native. Salva. E agora vamos testar se está funcionando. Vamos lá para o router. Aquivo do router, em vez de fazer o login em seu inicial, eu posso fazer o main em seu inicial. Tá bom? Eu movi o initial do login para o main, né? Então vamos salvar e ver o que acontece. Agora o main vai ser até o inicial, vai ser bem-vindo, mensagem. Tudo ok? Aqui é o título main, que vem dessa propriedade que a gente definiu. E está tudo ok. Vamos retornar o... Vamos remover o inicial daqui e... pôr de volta no componente login para seu inicial. E a gente... voltar para... Tudo ok? Tá bom? Então no próximo vídeo a gente vai... começar a olhar no estado do Redux e ver como a gente vai fazer o spawn para conectar com o Firebase. Então vamos lá.