Você teve sucesso?
Vamos fazê-lo juntos.
Vamos criar um novo componente aqui na entrada do objetivo, importando React do React e, em
seguida, aqui, vou nomear essa
entrada do objetivo e, assim como esta sintaxe constante aqui, você pode usar a entrada do
objetivo da função para criar seu componente funcional. também. Então aqui, exportarei a entrada de meta padrão e agora aqui, precisamos retornar
algo e que algo esteja no final dessa visualização
com a entrada de texto e o botão.
Então, deixe-me pegar toda a visualização, devolvê-la aqui entre colchetes para que ela seja escrita em várias linhas e bem formatada e, é
claro, agora precisamos importar novamente as coisas do React Native porque estamos usando alguns componentes do React Native , estamos
usando o componente de visualização, o componente de entrada de texto, o botão e também
quero usar o componente da folha de estilo para configurar meu objeto
da folha de estilo.
Então, para isso, vamos adicionar estilos aqui com o Stylesheet. criar, passe um objeto para essa folha de estilo. crie o método e,
claro, use os estilos do aplicativo. arquivo js, que seria o contêiner de entrada e a
entrada; portanto, corte ambos para que apenas a tela permaneça aqui e retorne à entrada do objetivo; adicionarei
ambos aqui à minha folha de estilo para que isso funcione novamente. O que não funcionará agora é que, quando
tocamos no botão, adicionamos isso porque aqui, não estamos tendo o estado na entrada da meta e, quando toco no botão, na verdade,
quero fazer algo no aplicativo. js.
Então, primeiro de tudo, precisamos dividir o estado. A meta inserida não deve ser gerenciada no aplicativo. js, mas deve ser gerenciado
na entrada da meta, porque é aí que temos a entrada de texto
no final, e é aí que o usuário insere a meta. Então, vamos adicionar a importação useState aqui na entrada da meta e, em
seguida, adicionar nossa lógica de gerenciamento de estado aqui com a meta inserida e definir a meta inserida que obtemos do useState, que inicializamos com uma sequência vazia,
vamos adicioná-la aqui à entrada da meta e do aplicativo. js, eu também pegarei o manipulador de entrada
de objetivo, cortá-lo dali e adicioná-lo à entrada de objetivo aqui, portanto, essa
função em uma função à qual nos conectamos ao onChangeText e agora com isso, buscar a entrada do
usuário deve funcionar novamente.
Agora, para o botão, quando pressionamos isso, quero ativar uma função no aplicativo. js, quero acionar o manipulador de meta de adição e essa função deve
permanecer aqui porque preciso gerenciar a lista aqui porque o aplicativo. O arquivo js é o único componente
que terá acesso à entrada da meta e ao FlatList onde produzimos as metas e,
falando nisso, já podemos importar as entradas da meta no aplicativo. js da entrada de meta de componentes e adicione
a entrada de meta como um componente aqui acima do FlatList, mas novamente, agora precisamos descobrir quando um botão
é pressionado nesse componente e no React, você faz isso
passando a função que a criança componente deve ser executado eventualmente como um suporte para o
componente filho.
Então, aqui, poderíamos adicionar onAddGoal, esse nome é totalmente seu, é um suporte
que você define
e isso aponta para adicionar manipulador de metas.
Isso por si só não fará nada, mas o onAddGoal agora será recebido como um suporte dentro da entrada do objetivo e
apontará para uma função, o que significa que podemos executá-lo como uma função lá.
Então, na entrada do objetivo, na imprensa, eu posso simplesmente
apontar para o suporte. onAddGoal, certo?
Porque onAddGoal é o nome do suporte que estou configurando aqui no aplicativo. arquivo js, que é recebido dentro da
entrada de objetivo no objeto props que estamos recebendo em todos os componentes funcionais e pontos onAddGoal em uma
função, para que possamos transmiti-lo ao onPress para
que o onPress ou o React Native, portanto, saiba que deve chamar essa função quando pressionamos
o botão,
é assim que você faz isso no React Native.
Ainda teríamos um problema porque, em adicionar manipulador de meta, estou me referindo à meta inserida e que anteriormente foi gerenciada aqui, mas
não é mais, gerenciamos a meta inserida,
que é a entrada de texto inserida pelo usuário na meta entrada agora e não no
aplicativo. js.
Portanto, adicione o manipulador de metas agora deve receber um argumento que seja o título da meta ou o nome
que
você quiser, esse nome é com você e é isso que armazenamos como valor aqui.
Agora precisamos garantir que encaminhe esse argumento quando o objetivo de adição for executado na entrada do objetivo.
Então, isso acontece aqui em uma prensa e ali apontamos para também configurar um argumento que
deve ser repassado, temos duas opções, a
primeira opção é configurar uma função de seta anônima aqui.
Agora, essa função de seta será executada eventualmente e, portanto, agora podemos adicionar parênteses
aqui, porque agora não
será executada quando ela for renderizada primeiro. Em vez disso, essa função de seta será
registrada como uma
função a ser executada no onPress e agora aqui no onAddGoal, podemos encaminhar a meta inserida, por exemplo, que
funcionaria ou, alternativamente, não usamos essa abordagem de função de seta anônima e, portanto,
não podemos adicionar parênteses aqui, mas podemos usar outro recurso Javascript, em funções às quais podemos chamar bind pré-configure alguns
argumentos que eventualmente devem ser transmitidos quando essa função for executada.
O primeiro argumento é sempre ao que a palavra-chave deve se referir.
Isso não importa para nós aqui, então podemos escrever isso, mas o segundo argumento aqui ou todos
os outros argumentos a seguir serão os argumentos recebidos por essa função quando ela é chamada e chamada com
o pressionar de um botão.
Agora, esses são os argumentos encaminhados para a função onAddGoal que, no final, é apenas a nossa
função add handler handler e, lá, precisamos do título da meta, então
precisamos encaminhar isso;
portanto, aqui, agora posso configurar a entrada objetivo como argumento a ser encaminhado e isso
é a sintaxe normal de baunilha Javascript aqui.
E agora, com isso, está sendo renderizado, está ótimo
e se eu
entrar, aprenda React Native, ainda obtendo saída aqui. Para que tudo funcione, mas agora dividimos
este aplicativo em vários componentes, o que você normalmente faz nos aplicativos React e React
Native, assim como no React para aplicativos da Web, porque mantém seus componentes mais magros, mais focados
e seu código mais organizado e mais fácil de entender.