Então, já analisamos um conjunto sólido de princípios básicos necessários para a criação de aplicativos React Native, para trabalhar com
esses blocos centrais, embora, é claro,
muitas das coisas ainda não estejam claras, não tivemos uma análise
mais detalhada estilo e layout e assim por diante, mas uma coisa que nós definitivamente
devemos fazer agora também é explorar como você pode construir seus próprios componentes, porque até agora, nós
sempre trabalhamos no aplicativo. js e você certamente
não criará aplicativos maiores em apenas um arquivo,
o arquivo ficará super grande e
se você tiver um componente personalizado que você planeja repetir, agora teríamos que copiar e colar
nosso código.
Então, vamos criar novos componentes e, portanto, aqui no projeto, vou adicionar uma nova pasta chamada componentes, o nome é
com você, mas desde que eu planejo armazenar alguns componentes lá, o nome faz sentido para mim
e lá, eu deseja criar um componente para o item da lista e também para a nossa área de entrada.
Então, vamos criar dois novos arquivos lá e eu terei uma convenção de nomenclatura para
os arquivos onde eu inicio com maiúsculas e eu terei meu GoalItem. js, é um arquivo Javascript, claro, e
meu GoalInput. arquivo js. Agora, ambos terão o componente React normal, portanto, vamos
começar com o item de meta e, portanto, importar React from React, da mesma forma que você precisa fazer isso em um projeto React for web.
Então, aqui, eu vou criar o meu componente funcional, item de meta que fica adereço e que então tem que
retornar algum jsx aqui e eu vou exportar isso como um padrão, assim como este.
Agora o jsx que eu quero renderizar lá tem que usar componentes React Native ou outros componentes customizados que, por sua
vez, usam componentes React Native e aqui eu irei
com este conteúdo que eu tinha aqui. Então vou cortar do aplicativo. arquivo js e devolva-o
aqui.
Agora, para usar isso aqui, temos que importar o modo de exibição e o
texto, então esses dois componentes, do React Native.
Então, vamos importar a visualização e o texto do React-Native aqui.
Além disso, estou configurando alguns estilos e eu quero usar a folha
de estilo, então eu vou importar isso aqui também e, em seguida, configurar meus estilos constante que você poderia nomear de forma diferente, claro, com stylesheet
criar e eu vou voltar para o aplicativo. js arquivo e pegue o meu estilo de item de lista aqui, cortá-lo de lá e ir para
o item de meta e adicioná-lo aqui para este objeto eu passo para folha de estilo. crio.
Agora isso deve funcionar, mas é claro que o que eu estou produzindo aqui não estará mais nos dados do item, em
vez disso, vamos esperar que nós simplesmente obtemos isso como adereços, então ou adere crianças para que elas possam ser passadas entre a tag de
abertura e fechamento de nossos itens. componente personalizado ou talvez adereços. título, o que você quiser, um
nome próprio de sua escolha. Agora podemos usar nosso componente personalizado,
o item de meta, voltando ao aplicativo. arquivo js e aqui adicionarei a importação ao item de meta com um G
maiúsculo, para que o React reconheça isso como um componente personalizado. / components / GoalItem, você pode omitir o. js e agora podemos usar o
item de meta aqui no item de renderização como um componente personalizado, nesse caso um componente de fechamento automático porque como estou
usando o título de props e não adoro crianças, não espero nada entre a
abertura e o fechamento tags do meu componente personalizado. Eu espero um título prop, então vamos definir isso aqui com título
e, em seguida, aqui, podemos apontar os dados do item, então obter acesso no item que é um objeto
onde temos uma chave de valor e com isso, ainda devemos ver O mesmo que antes, se nós entramos em algumas metas aqui, aprender tudo sobre rn, sim que
está com bom aspecto, agora com o nosso componente personalizado. Agora aqui está uma boa prática para você também colocar a entrada
de texto e botão ou toda essa visão aqui, na verdade, em nosso componente de entrada de meta e, claro, para isso,
você também precisará conectar a comunicação entre o aplicativo. O arquivo js e o componente de entrada da meta
devem ser informados quando os usuários pressionam esse botão no componente de entrada da meta e, em seguida, adicionam dados aqui no
aplicativo. arquivo js.
É assim que você faria em um projeto do React for web, então se você tem experiência com
isso, não deve haver problema, caso contrário, faremos isso juntos na próxima palestra, mas se você souber como fazê-lo, tente em
seu primeiro lugar agora.