Resumo do Transcript sobre Criação de Componentes em React Native

Então, agora a gente vai definir como a página principal, aquela página que eu extrai no botão que a gente fez, com Startable Highlights, tá bom? Então, vamos criar uma nova rota, chamar ela... Vamos botar no default, quando todos esses caras aqui não funcionarem, vamos pôr o... Pagina com os botões, vamos chamar alguma coisa, sei lá, menu... Menu, opções, alguma coisa. Vamos chamar menu... Sema nav menu. Tá bom, vamos criar esse componente com a template, esse aqui. Então, vamos criar um novo componente aqui, new file, novo arquivo, vamos chamar de nav menu, tá bom? E vamos lá, criar de novo um componente. Bom, ok, a primeira vai perguntar, esse componente vai ser funcional ou classe? A gente precisa manter a estada? Bem, o que a gente tem no template? Tem três botões sensível, talk. Até agora, parece que não estamos mantendo nenhum estado. Então, vamos criar um funcional. A partir de um momento que a gente começa a adicionar outras coisas, e a gente ter que começar a manter o estado, naquele momento a gente pode mudar de funcional para componentes de classe. Mas, agora, no momento, a gente não precisa manter estada, então, vamos fazer primeiro o funcional. Ok, estamos aqui dentro do... arquivo nav menu, né? Primeira coisa, vamos importar o react. From react. A gente vai precisar do react nere, dos componentes, né? View, touchable highlight, utext. Então, vamos lá, import. Vamos dar um destructuring, porque a gente não quer digitar react.nere.txt, react.nere.view. Vamos botar lá, text.view, touchable highlight. Vamos botar numa nova linha, só para ficar mais organizado from react.nere. Bom, importamos os componentes essenciais para rodar react.nere. E vamos fazer o... Vamos fazer o componente, tá bom? Se a gente ver aqui como é que a gente fez antes, eu fiz um cost, primeiro página, e pui a função. Aí, depois que eu exportei, tá bom? Mas esses dois passos podem ser feitos só um. Então, eu vou fazer... Export default, ao mesmo tempo. Tá bom? Export default e vai ser... Função, tá bom? E retorno o template, que já tá aqui, que eu copiar aqui. Aqui, você... Aí o template, já exportei... Automaticamente... Ah, esqueci o nome, né? Vamos ver. Então, vamos voltar aqui no index e por... Importar nav menu from component... Nav menu sem extensão. Agora, vamos mudar a rota inicial no navegador para ser nav menu. A gente não tem aqui, mas vai para o default, né? Porque todos esses caras não vai reconhecer. Can't find variable styles. A gente não tem estilo para o nav menu, né? Quer que é styles? Então, a gente pode copiar aqui. Na verdade, os styles já estão aqui, em vez de estar no outro arquivo. Então, vamos copiar os styles aqui. Copiei do outro. Tá bom? Vai ter o container, botão e texto do botão. Nesse caso, a gente precisa de um stylesheet create. Tá bom? Então, vamos por esse componente stylesheet aqui, do react-native. Tá bom? Tá aí. Vamos remover esses styles aqui, que não precisamos, né? Pode precisar depois, mas sei lá, vou tirar... Tirar. Vou ensucar um momento para comentar isso. Tá bom? Agora, foi o nav menu aqui. Componente exporteia logo, que fiz a função, em vez de primeiro fazer a função, associar com a variável const, e depois exportar, fiz tudo ao mesmo tempo aqui. E retornei o template. Esse template tem uns styles aqui, que eu copiei do outro, que na verdade a gente estava usando naquelas estilos. Fiz um const, fiz um stylesheet, fola de estilo. E... Estamos todos definidos aqui, não precisamos mais definir no outro index. Aí aqui, no initial route do navigator, é vai ser nav menu. E no default nav menu aqui, porque esse... não segue, não segue esse, vai no default. E a gente exportou aqui. Então tá aí a página inicial, é a página dos três botões. E quando a gente clicar, a gente quer mudar para a cena da primeira página, para aquele componente. Se lembra que eu falei do propsnavgearopush, a gente vai usar isso agora. Vamos voltar aqui, para nav menu, e vamos definir as funções quando você clicar o botão, o que é que vai acontecer. Primeiros vamos clicar a primeira página, que é esse touchable highlight. Vamos fazer aqui a função aqui, não é? Vamos criar essa função chamada navigate. Só para facilitar o nosso trabalho aqui. Vamos fazer uma função, vou chamar navigate, tá bom? E const. Vou tentar de bobo aqui fora. Vamos ver se vai funcionar aqui fora. Chama navigate. Vamos pegar o ID da rota para ir. E vamos fazer propsnavgearopush, passa um objeto, um id, como id. Mas agora não vai saber o que é props, né? Vamos ver aqui no navegador debug, vou inspecitar, botar o console. E push navigate. E agora quando a gente clicar, a gente chama o navigate com o id, sei lá, primeira página. Vamos ver o que acontece. Undefined is not an object. Tá dizendo que não está definido se navigador dos desplos props. Mas o que é props? Não é? Não sabe o que é. Então vamos primeiro aqui falar do componente. Depois a gente vê a função aqui. Então todo componente é injetado props, propriedades. Você vê aqui que a gente põe propriedades por navegador initial route, tem um render scene. São todas propriedades injetadas nesse componente chamado navigator. Do jeito e dentro do componente, a gente tem acesso aos propriedades via this.props. Mas aqui a gente não tem ainda, porque quando a gente inputar ali no argumento dessa função de costa, que é o componente funcional, a gente põe props e esses props vai ter todas as propriedades que foram dadas a esse componente. Nesse caso aqui, eu não passei nenhuma propriedade para o navegador. Mas eu quero passar ao navegador, porque o navegador tem que ter acesso ao navegador para usá-lo, para se comunicar com o navegador para dizer eu tenho que mudar a página, você tem que mudar a página. Então a gente fala o navegueiro que essa é a propriedade que a gente está passando para o nav menu e o valor vai ser esse cara aqui, o argumento da função render scene, que é o navegador, o próprio navegador. Tá bom?