1
00:00:02,250 --> 00:00:03,310
Você teve sucesso?

2
00:00:03,350 --> 00:00:04,710
Vamos fazê-lo juntos.

3
00:00:04,710 --> 00:00:11,390
Vamos criar um novo componente aqui na entrada do objetivo, importando React do React e, em

4
00:00:11,500 --> 00:00:14,040
seguida, aqui, vou nomear essa

5
00:00:14,040 --> 00:00:20,610
entrada do objetivo e, assim como esta sintaxe constante aqui, você pode usar a entrada do

6
00:00:20,610 --> 00:00:28,120
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

7
00:00:28,120 --> 00:00:31,030
algo e que algo esteja no final dessa visualização

8
00:00:31,030 --> 00:00:33,700
com a entrada de texto e o botão.

9
00:00:34,090 --> 00:00:42,650
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, é

10
00:00:42,650 --> 00:00:50,110
claro, agora precisamos importar novamente as coisas do React Native porque estamos usando alguns componentes do React Native , estamos

11
00:00:50,110 --> 00:00:55,840
usando o componente de visualização, o componente de entrada de texto, o botão e também

12
00:00:55,840 --> 00:01:00,460
quero usar o componente da folha de estilo para configurar meu objeto

13
00:01:00,460 --> 00:01:02,270
da folha de estilo.

14
00:01:02,470 --> 00:01:10,510
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,

15
00:01:11,140 --> 00:01:16,840
claro, use os estilos do aplicativo. arquivo js, que seria o contêiner de entrada e a

16
00:01:16,840 --> 00:01:21,540
entrada; portanto, corte ambos para que apenas a tela permaneça aqui e retorne à entrada do objetivo; adicionarei

17
00:01:21,730 --> 00:01:28,510
ambos aqui à minha folha de estilo para que isso funcione novamente. O que não funcionará agora é que, quando

18
00:01:28,510 --> 00:01:37,840
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,

19
00:01:37,870 --> 00:01:42,790
quero fazer algo no aplicativo. js.

20
00:01:42,910 --> 00:01:49,480
Então, primeiro de tudo, precisamos dividir o estado. A meta inserida não deve ser gerenciada no aplicativo. js, mas deve ser gerenciado

21
00:01:49,480 --> 00:01:54,040
na entrada da meta, porque é aí que temos a entrada de texto

22
00:01:54,040 --> 00:02:01,360
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

23
00:02:01,360 --> 00:02:08,950
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,

24
00:02:08,950 --> 00:02:14,650
vamos adicioná-la aqui à entrada da meta e do aplicativo. js, eu também pegarei o manipulador de entrada

25
00:02:14,650 --> 00:02:18,780
de objetivo, cortá-lo dali e adicioná-lo à entrada de objetivo aqui, portanto, essa

26
00:02:18,820 --> 00:02:24,910
função em uma função à qual nos conectamos ao onChangeText e agora com isso, buscar a entrada do

27
00:02:24,910 --> 00:02:26,490
usuário deve funcionar novamente.

28
00:02:26,740 --> 00:02:32,660
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

29
00:02:32,680 --> 00:02:38,360
permanecer aqui porque preciso gerenciar a lista aqui porque o aplicativo. O arquivo js é o único componente

30
00:02:38,560 --> 00:02:44,350
que terá acesso à entrada da meta e ao FlatList onde produzimos as metas e,

31
00:02:44,350 --> 00:02:52,950
falando nisso, já podemos importar as entradas da meta no aplicativo. js da entrada de meta de componentes e adicione

32
00:02:52,950 --> 00:03:02,010
a entrada de meta como um componente aqui acima do FlatList, mas novamente, agora precisamos descobrir quando um botão

33
00:03:02,010 --> 00:03:06,790
é pressionado nesse componente e no React, você faz isso

34
00:03:06,790 --> 00:03:14,740
passando a função que a criança componente deve ser executado eventualmente como um suporte para o

35
00:03:14,740 --> 00:03:16,150
componente filho.

36
00:03:16,150 --> 00:03:20,850
Então, aqui, poderíamos adicionar onAddGoal, esse nome é totalmente seu, é um suporte

37
00:03:20,860 --> 00:03:22,230
que você define

38
00:03:22,840 --> 00:03:25,990
e isso aponta para adicionar manipulador de metas.

39
00:03:26,030 --> 00:03:32,980
Isso por si só não fará nada, mas o onAddGoal agora será recebido como um suporte dentro da entrada do objetivo e

40
00:03:32,980 --> 00:03:37,520
apontará para uma função, o que significa que podemos executá-lo como uma função lá.

41
00:03:37,540 --> 00:03:41,550
Então, na entrada do objetivo, na imprensa, eu posso simplesmente

42
00:03:41,950 --> 00:03:45,990
apontar para o suporte. onAddGoal, certo?

43
00:03:46,000 --> 00:03:51,370
Porque onAddGoal é o nome do suporte que estou configurando aqui no aplicativo. arquivo js, que é recebido dentro da

44
00:03:51,370 --> 00:03:57,430
entrada de objetivo no objeto props que estamos recebendo em todos os componentes funcionais e pontos onAddGoal em uma

45
00:03:57,430 --> 00:04:00,200
função, para que possamos transmiti-lo ao onPress para

46
00:04:00,330 --> 00:04:05,630
que o onPress ou o React Native, portanto, saiba que deve chamar essa função quando pressionamos

47
00:04:05,630 --> 00:04:06,470
o botão,

48
00:04:06,550 --> 00:04:09,430
é assim que você faz isso no React Native.

49
00:04:09,430 --> 00:04:17,150
Ainda teríamos um problema porque, em adicionar manipulador de meta, estou me referindo à meta inserida e que anteriormente foi gerenciada aqui, mas

50
00:04:17,170 --> 00:04:19,670
não é mais, gerenciamos a meta inserida,

51
00:04:19,750 --> 00:04:25,540
que é a entrada de texto inserida pelo usuário na meta entrada agora e não no

52
00:04:25,550 --> 00:04:26,340
aplicativo. js.

53
00:04:26,950 --> 00:04:32,620
Portanto, adicione o manipulador de metas agora deve receber um argumento que seja o título da meta ou o nome

54
00:04:32,620 --> 00:04:33,160
que

55
00:04:33,190 --> 00:04:37,530
você quiser, esse nome é com você e é isso que armazenamos como valor aqui.

56
00:04:37,540 --> 00:04:47,700
Agora precisamos garantir que encaminhe esse argumento quando o objetivo de adição for executado na entrada do objetivo.

57
00:04:48,870 --> 00:04:55,350
Então, isso acontece aqui em uma prensa e ali apontamos para também configurar um argumento que

58
00:04:55,350 --> 00:04:58,410
deve ser repassado, temos duas opções, a

59
00:04:58,410 --> 00:05:02,620
primeira opção é configurar uma função de seta anônima aqui.

60
00:05:02,640 --> 00:05:08,250
Agora, essa função de seta será executada eventualmente e, portanto, agora podemos adicionar parênteses

61
00:05:08,250 --> 00:05:09,930
aqui, porque agora não

62
00:05:09,960 --> 00:05:16,050
será executada quando ela for renderizada primeiro. Em vez disso, essa função de seta será

63
00:05:16,050 --> 00:05:17,730
registrada como uma

64
00:05:17,730 --> 00:05:25,230
função a ser executada no onPress e agora aqui no onAddGoal, podemos encaminhar a meta inserida, por exemplo, que

65
00:05:25,290 --> 00:05:30,690
funcionaria ou, alternativamente, não usamos essa abordagem de função de seta anônima e, portanto,

66
00:05:30,690 --> 00:05:38,790
não podemos adicionar parênteses aqui, mas podemos usar outro recurso Javascript, em funções às quais podemos chamar bind pré-configure alguns

67
00:05:39,120 --> 00:05:43,560
argumentos que eventualmente devem ser transmitidos quando essa função for executada.

68
00:05:43,560 --> 00:05:47,190
O primeiro argumento é sempre ao que a palavra-chave deve se referir.

69
00:05:47,190 --> 00:05:52,680
Isso não importa para nós aqui, então podemos escrever isso, mas o segundo argumento aqui ou todos

70
00:05:52,680 --> 00:05:58,440
os outros argumentos a seguir serão os argumentos recebidos por essa função quando ela é chamada e chamada com

71
00:05:58,440 --> 00:06:00,270
o pressionar de um botão.

72
00:06:00,270 --> 00:06:06,210
Agora, esses são os argumentos encaminhados para a função onAddGoal que, no final, é apenas a nossa

73
00:06:06,210 --> 00:06:10,600
função add handler handler e, lá, precisamos do título da meta, então

74
00:06:10,620 --> 00:06:12,080
precisamos encaminhar isso;

75
00:06:12,120 --> 00:06:17,740
portanto, aqui, agora posso configurar a entrada objetivo como argumento a ser encaminhado e isso

76
00:06:17,940 --> 00:06:20,760
é a sintaxe normal de baunilha Javascript aqui.

77
00:06:21,850 --> 00:06:24,740
E agora, com isso, está sendo renderizado, está ótimo

78
00:06:24,740 --> 00:06:25,920
e se eu

79
00:06:26,090 --> 00:06:31,340
entrar, aprenda React Native, ainda obtendo saída aqui. Para que tudo funcione, mas agora dividimos

80
00:06:31,340 --> 00:06:36,770
este aplicativo em vários componentes, o que você normalmente faz nos aplicativos React e React

81
00:06:36,770 --> 00:06:42,740
Native, assim como no React para aplicativos da Web, porque mantém seus componentes mais magros, mais focados

82
00:06:42,800 --> 00:06:46,550
e seu código mais organizado e mais fácil de entender.