1
00:00:02,420 --> 00:00:08,930
Agora, com tudo isso neste módulo, você aprendeu muito sobre como criar aplicativos reais com o React Native.

2
00:00:08,930 --> 00:00:11,780
Você aprendeu muito sobre os componentes internos, aprendeu

3
00:00:11,780 --> 00:00:16,370
muito sobre estilo e como organizar as coisas da maneira que deseja e

4
00:00:16,370 --> 00:00:17,300
como estilizar

5
00:00:17,300 --> 00:00:24,290
as coisas da maneira que deseja, e também como o estilo difere entre alguns componentes, por exemplo, que para componentes

6
00:00:24,320 --> 00:00:26,320
de texto, o estilo cascata até

7
00:00:26,390 --> 00:00:31,970
certo ponto; portanto, os estilos são herdados em estilos aninhados, algo que estamos aproveitando na tela

8
00:00:31,970 --> 00:00:39,770
do game aqui, mas que em todos os outros componentes, como a exibição, os estilos que você aplica a ele realmente se aplicam

9
00:00:39,770 --> 00:00:45,880
apenas a essa exibição e não se conectam em cascata, não são compartilhadas com nenhuma exibição filho aninhada.

10
00:00:45,890 --> 00:00:52,010
Você também aprendeu como compartilhar estilos comuns, por exemplo, com componentes personalizados, como o texto do corpo, que configura

11
00:00:52,010 --> 00:00:58,100
uma família de fontes geral, para que possamos usar o texto do corpo em vez do texto interno, se

12
00:00:58,130 --> 00:01:00,480
quisermos texto com essa família de fontes.

13
00:01:00,590 --> 00:01:04,190
É claro que esse é um conceito que você pode usar para qualquer estilo

14
00:01:04,310 --> 00:01:09,980
compartilhado que desejar, como também o fazemos para o tipo de cartão, onde temos uma visão privilegiada para nos dar essa bela

15
00:01:10,010 --> 00:01:12,140
aparência de cartão com um pouco de sombra.

16
00:01:12,140 --> 00:01:17,450
Você também aprendeu como configurar alguns temas com constantes que podem ser importadas para arquivos diferentes, tanto

17
00:01:17,870 --> 00:01:23,990
para cores aqui quanto para as que são necessárias, para estilos de texto ou para qualquer outro estilo que você

18
00:01:23,990 --> 00:01:29,630
queira compartilhar entre componentes, para que você não não é necessário reescrevê-lo o tempo todo, especialmente útil para casos

19
00:01:29,630 --> 00:01:33,120
em que você não deseja ou não pode criar componentes separados, como

20
00:01:33,260 --> 00:01:36,070
estamos fazendo na família de fontes, por exemplo.

21
00:01:36,250 --> 00:01:40,820
Portanto, se isso não for possível, o que no caso das cores teria

22
00:01:40,820 --> 00:01:47,690
sido difícil porque precisamos de cores em todos os tipos de lugares, esses estilos ou constantes compartilhados são uma ótima

23
00:01:47,690 --> 00:01:53,420
maneira e, em geral, espero que você tenha uma ideia de como componha interfaces de usuário com

24
00:01:53,450 --> 00:01:58,820
componentes internos e com seus próprios componentes personalizados, que se acumulam nos componentes internos e como

25
00:01:58,820 --> 00:02:02,120
você pode, portanto, criar aplicativos agradáveis do React Native.

26
00:02:02,140 --> 00:02:07,390
Examinamos alguns componentes principais e, portanto, também quero dar um resumo rápido sobre o que

27
00:02:07,390 --> 00:02:09,710
você aprendeu sobre esses componentes aqui.

28
00:02:09,760 --> 00:02:15,080
Provavelmente, o componente mais importante é a visualização, que é um contêiner que você envolve em

29
00:02:15,100 --> 00:02:21,180
torno de outros componentes para distribuir esses componentes ou adicionar certos estilos de contêiner, como sombras, bordas, cores de

30
00:02:21,190 --> 00:02:24,760
plano de fundo, coisas assim. Igualmente importante é

31
00:02:24,760 --> 00:02:29,870
o componente de texto usado para a saída de texto.

32
00:02:29,950 --> 00:02:36,130
Você também pode aninhar texto em texto onde algum estilo é compartilhado e, em geral, pode controlar como

33
00:02:36,130 --> 00:02:41,980
o texto deve ser produzido, se deve envolver-se qual é o padrão ou se deve gerar apenas

34
00:02:41,980 --> 00:02:43,070
uma ou duas

35
00:02:43,210 --> 00:02:49,450
linhas e é aí que o componente de texto realmente ajuda a fornecer essas informações valiosas para seus usuários.

36
00:02:49,450 --> 00:02:53,860
Agora, às vezes, você não apenas deseja gerar informações, mas também buscar informações e, para isso,

37
00:02:53,860 --> 00:02:55,930
a entrada de texto pode ser útil.

38
00:02:55,930 --> 00:03:00,760
Agora vamos nos aprofundar na busca de entrada do usuário mais adiante neste curso, mas você já deu uma primeira olhada

39
00:03:00,760 --> 00:03:05,290
em como pode estilizá-lo, como configurá-lo e como garantir que está recebendo a entrada correta e se está validando

40
00:03:05,320 --> 00:03:11,210
a entrada e você realmente está trabalhando apenas com a entrada necessária. Agora, falando da entrada do usuário, é claro que

41
00:03:11,210 --> 00:03:14,230
o botão também é um componente crucial, seja o botão

42
00:03:14,330 --> 00:03:19,070
interno ou o seu próprio botão, que você pode criar com os componentes tocáveis, que

43
00:03:19,130 --> 00:03:20,960
também são super importantes e nos

44
00:03:20,960 --> 00:03:26,660
casos em que você precisa gerar listas de você aprendeu sobre o FlatList e sobre a exibição de

45
00:03:26,750 --> 00:03:32,270
rolagem, onde a principal diferença é que o FlatList é otimizado para listas muito longas ou listas em

46
00:03:32,270 --> 00:03:35,790
que você realmente não sabe quanto tempo elas durarão, mas elas

47
00:03:35,930 --> 00:03:42,470
são potencialmente muito longas, enquanto a exibição de rolagem é ótima para qualquer outro conteúdo rolável que não seja infinitamente longo,

48
00:03:42,470 --> 00:03:48,410
onde você certamente irá além dos limites da tela, mas não haverá muito conteúdo extra, porque se todo esse

49
00:03:48,410 --> 00:03:54,110
conteúdo extra for renderizado sem que seja usado, sem que seja visível para você está perdendo desempenho e

50
00:03:54,110 --> 00:03:54,860
é aí

51
00:03:54,920 --> 00:03:56,710
que o FlatList entra, porque

52
00:03:56,780 --> 00:03:59,980
isso apenas renderiza o que o usuário pode realmente ver.

53
00:04:00,020 --> 00:04:05,330
Falando sobre o que o usuário pode ver, neste módulo, você também aprendeu como adicionar suas próprias fontes personalizadas

54
00:04:05,330 --> 00:04:08,770
e, às vezes, não precisa de uma fonte, mas de uma imagem,

55
00:04:08,900 --> 00:04:14,580
também aprendeu como fazer isso, como incluir local ou rede imagens e como você pode estilizar essas imagens para ficarem bem.

56
00:04:14,600 --> 00:04:20,240
Falando em estilo, para isso, estamos usando a folha de estilo que não é um componente, mas

57
00:04:20,240 --> 00:04:22,130
uma classe ou um objeto

58
00:04:22,130 --> 00:04:28,190
fornecido pelo React Native e a vantagem de usar essa folha de estilo não é apenas o fato

59
00:04:28,190 --> 00:04:35,090
de você tirar seus estilos do código jsx que você deseja manter-se relativamente enxuto, curto e conciso, mas também recebe validação

60
00:04:35,180 --> 00:04:41,110
automática de seus estilos e o React Native informa quando você está usando um estilo incorretamente e que,

61
00:04:41,150 --> 00:04:47,860
no futuro, também poderá obter otimizações de desempenho adicionais. E com isso, podemos apenas encorajá-lo a manter

62
00:04:47,860 --> 00:04:48,810
esta seção

63
00:04:48,820 --> 00:04:55,540
em mente, talvez repassá-la uma segunda vez e usá-la como base para o progresso de seu curso, onde

64
00:04:55,540 --> 00:05:01,570
usaremos todos esses componentes com os quais trabalhamos, onde escreveremos mais estilos, onde criaremos interfaces de

65
00:05:01,570 --> 00:05:07,330
usuário mais complexas e onde você realmente precisará desses fundamentos que aprendeu no segundo e

66
00:05:07,330 --> 00:05:11,080
neste módulo do curso para criar incríveis aplicativos React Native.

67
00:05:11,080 --> 00:05:11,890
Então vamos seguir em frente.