1
00:00:04,540 --> 00:00:11,110
Estilos inline são muito fáceis de aplicar, mas sua desvantagem é que quanto mais complexo seu

2
00:00:11,110 --> 00:00:18,260
aplicativo fica e sua configuração fica, seu componente fica, mais difícil é seguir junto com todos esses estilos inline.

3
00:00:18,370 --> 00:00:24,040
Você terá um monte de código lá em cima, no seu código jsx e pode ser difícil de

4
00:00:24,040 --> 00:00:24,720
ler, entender.

5
00:00:24,870 --> 00:00:27,870
Portanto, embora você possa usar estilos in-line, recomenda-se usar

6
00:00:27,940 --> 00:00:32,740
um objeto de folha de estilo e é exatamente isso que está sendo criado

7
00:00:32,740 --> 00:00:33,820
lá embaixo.

8
00:00:33,820 --> 00:00:39,120
Isso usa stylesheet que é uma classe no final fornecida pelo React Native, e

9
00:00:39,130 --> 00:00:46,660
é por isso que nós importamos de lá e isso cria um objeto Javascript que contém toda a configuração do seu estilo.

10
00:00:46,660 --> 00:00:51,940
A diferença para um objeto JavaScript vanilla que você também pode criar

11
00:00:51,940 --> 00:00:59,590
sozinho assim é simplesmente essa folha de estilo. create no futuro também pode aplicar algumas otimizações de desempenho e aplicar seus estilos

12
00:00:59,590 --> 00:01:01,530
de forma mais eficiente no final.

13
00:01:01,600 --> 00:01:07,480
Portanto, você deve usar isso porque você não perde nada, mas no futuro, você pode

14
00:01:07,540 --> 00:01:12,190
se beneficiar de otimizações adicionais. Agora, quando estou gravando isso, não há

15
00:01:12,190 --> 00:01:17,800
diferença, mas novamente, você deve usar a folha de estilo. criar porque não vai doer e você pode obter

16
00:01:17,800 --> 00:01:22,120
otimizações de desempenho adicionais no futuro. Outra vantagem de usar a folha de

17
00:01:22,120 --> 00:01:28,150
estilo é que isso adicionará automaticamente alguma validação, o que significa que se você estiver usando uma propriedade de estilo

18
00:01:28,150 --> 00:01:33,550
incorreta ou um valor incorreto, o React Native detectará isso e lançará um erro que simplesmente facilita

19
00:01:33,550 --> 00:01:35,380
a localização tais erros, se

20
00:01:35,470 --> 00:01:39,370
não houvesse validação, falhariam silenciosamente, simplesmente não aplicariam o estilo e você nem

21
00:01:39,370 --> 00:01:45,160
mesmo veria isso instantaneamente ou veria que o estilo não está correto, mas você não vê realmente porque não

22
00:01:45,160 --> 00:01:48,070
está funcionando, portanto, essa validação integrada é outra vantagem

23
00:01:48,070 --> 00:01:53,950
de usar esse objeto de folha de estilo aqui. Para criar, você passa um objeto Javascript como

24
00:01:54,040 --> 00:01:56,680
um argumento, então o argumento que você

25
00:01:56,680 --> 00:02:01,450
passa aqui é um objeto Javascript e nesse objeto, você pode definir seus estilos

26
00:02:01,450 --> 00:02:07,000
e você não faz isso adicionando padding 10 porque não está claro onde isso deve ser

27
00:02:07,000 --> 00:02:08,020
aplicado, em

28
00:02:08,020 --> 00:02:15,280
vez disso você usa qualquer nome de propriedade de sua escolha, como por exemplo a tela, para configurar o estilo para

29
00:02:15,370 --> 00:02:16,810
a visualização geral da

30
00:02:16,810 --> 00:02:21,040
tela, portanto, para esse nível superior aqui e você poderia ter escolhido

31
00:02:21,040 --> 00:02:26,490
qualquer nome desejado aqui não precisa ser tela. Aqui, agora você tem um objeto

32
00:02:26,560 --> 00:02:30,610
JavaScript aninhado, portanto, o valor dessa propriedade é outro objeto JavaScript

33
00:02:30,610 --> 00:02:33,800
e, nesse caso, você configura o preenchimento 50, por

34
00:02:33,820 --> 00:02:37,630
exemplo, de modo que o estilo também estava lá em cima.

35
00:02:37,700 --> 00:02:40,510
Agora podemos remover esse estilo aqui, eu ainda tenho

36
00:02:40,520 --> 00:02:45,980
a propriedade de estilo mas não tenho mais o objeto de estilo inline e agora, agora eu aponto

37
00:02:46,010 --> 00:02:52,120
para estilos que é essa constante que contém nosso objeto de folha de estilo, eu aponto para estilos e então ponto,

38
00:02:52,150 --> 00:02:58,430
eu aponto para o estilo da tela e é isso que eu quis dizer, você pode escolher qualquer nome que você

39
00:02:58,430 --> 00:03:00,090
quer aqui, se você teria

40
00:03:00,170 --> 00:03:06,440
chamado essa raiz, então você teria que usar root lá. Então você pode usar qualquer nome que quiser, você só

41
00:03:06,440 --> 00:03:07,160
tem que

42
00:03:07,160 --> 00:03:12,550
ter certeza de que os nomes que você usa lá embaixo encontram os nomes que você usa

43
00:03:12,570 --> 00:03:18,540
aqui e agora diz ao React Native que essa visão deve ter os estilos definidos para a tela lá embaixo.

44
00:03:18,650 --> 00:03:20,990
Você pode fazer o mesmo para o nosso contêiner de entrada,

45
00:03:20,990 --> 00:03:25,860
digamos, mais uma vez este nome é totalmente até você, recipiente de entrada. Aqui, vou usar esse

46
00:03:25,880 --> 00:03:28,400
objeto de estilo que apliquei como

47
00:03:28,400 --> 00:03:37,130
um estilo inline a essa visualização antes e apliquei isso como meu valor para esse contêiner de entrada.

48
00:03:37,130 --> 00:03:42,260
Agora, nessa perspectiva, nós referenciamos estilos. inputContainer, agora com alguma formatação automática

49
00:03:42,260 --> 00:03:48,110
que você, a propósito, pode fazer no Visual Studio Code acessando preferências, atalhos de teclado

50
00:03:49,130 --> 00:03:54,860
e pesquisando documentos em formato, esse é o atalho que deseja pressionar para que

51
00:03:55,010 --> 00:04:00,780
os documentos sejam formatados automaticamente, o arquivo. Com isso, temos algumas estruturas de código limpas aqui,

52
00:04:00,860 --> 00:04:04,710
vemos que esses são nossos estilos de contêiner de entrada e os aplicamos aqui.

53
00:04:04,730 --> 00:04:10,910
Outra vantagem de ter esse objeto de folha de estilo também é que você pode aplicar o mesmo estilo

54
00:04:10,910 --> 00:04:12,680
a várias exibições sem copiá-lo.

55
00:04:12,710 --> 00:04:18,200
Então, se quisermos ter o estilo de contêiner de entrada, não apenas nessa visão, mas

56
00:04:18,350 --> 00:04:25,160
também nesta, poderíamos simplesmente escrever estilos de estilo. inputContainer, você pode aplicar esse estilo a quantos

57
00:04:25,190 --> 00:04:26,290
componentes desejar.

58
00:04:26,290 --> 00:04:32,460
Agora, é claro, eu não preciso disso aqui, mas podemos usá-lo aqui, se precisarmos. Agora, o último estilo que quero aplicar está

59
00:04:32,460 --> 00:04:35,030
na entrada de texto aqui.

60
00:04:35,030 --> 00:04:40,970
Lá, vou apenas nomear essa entrada, muitas chaves, configurar meus estilos aqui

61
00:04:41,130 --> 00:04:55,430
e depois na entrada de texto, consulte os estilos. entrada, assim.

62
00:04:55,560 --> 00:05:01,320
E com isso, se salvarmos isso, teremos a mesma aparência de antes, mas agora estamos usando o objeto stylesheet que

63
00:05:01,320 --> 00:05:05,610
facilita o compartilhamento e a reutilização de estilos, o que possivelmente nos renderá

64
00:05:05,610 --> 00:05:10,290
otimizações futuras de desempenho e, além disso, nosso código jsx simplesmente é muito mais magro agora.