1
00:00:02,310 --> 00:00:08,520
Então, vamos estilizar esses componentes e, para isso, queremos aplicar algum estilo aos componentes de texto.

2
00:00:09,120 --> 00:00:12,780
O componente de texto de fato suporta a propriedade de estilo, como

3
00:00:12,780 --> 00:00:19,680
você pode verificar nos documentos oficiais, mas o componente de texto realmente suporta menos recursos de estilo do que a visualização e, portanto,

4
00:00:19,710 --> 00:00:20,610
eu o

5
00:00:20,970 --> 00:00:26,030
envolvo em outro componente de visualização e é apenas o componente de exibição estão importando do React

6
00:00:26,040 --> 00:00:31,560
Native, essa também é a parte que eu quis dizer com você que só tem alguns componentes base, mas

7
00:00:31,560 --> 00:00:36,960
eles vão te levar muito longe porque você trabalha com views e botões e textos o tempo todo.

8
00:00:37,530 --> 00:00:44,730
Então aqui eu vou embrulhar este texto com o componente de visualização de abertura e fechamento aqui e agora aqui, nós temos

9
00:00:44,730 --> 00:00:46,090
mais opções de estilo.

10
00:00:46,290 --> 00:00:50,730
Agora, novamente, não irei para estilos inline aqui, mas adicionarei estilos

11
00:00:50,730 --> 00:00:54,000
à folha de estilo, por exemplo, poderíamos

12
00:00:54,210 --> 00:01:03,810
nomear este item da lista, mas o nome é com você e vamos dizer aqui queremos ter um preenchimento de 10, vamos dar é

13
00:01:03,810 --> 00:01:17,750
uma cor de plano de fundo deste código hexadecimal cinza aqui, dê a ele uma cor de borda preta e também uma largura de borda de uma e agora vamos atribuir um item de lista

14
00:01:17,880 --> 00:01:25,720
como um estilo a essa vista referindo-se a estilos. listItem aqui e com isso, se salvarmos

15
00:01:25,770 --> 00:01:34,380
isso, agora nosso item de lista deve parecer um pouco melhor, aprender Reagir Nativo, é

16
00:01:34,610 --> 00:01:39,620
assim que parece. Agora, alguns espaçamentos provavelmente também seriam bons, podemos

17
00:01:39,620 --> 00:01:46,850
conseguir isso com margem, preenchimento é o espaçamento entre a borda e o conteúdo, a margem é o espaçamento entre a borda e o

18
00:01:46,850 --> 00:01:49,270
conteúdo ao redor, então os outros

19
00:01:49,280 --> 00:01:55,130
elementos ao redor e lá, poderíamos adicionar margem 10 para adicionar uma margem em todas as direções, podemos também

20
00:01:55,460 --> 00:01:59,600
adicionar uma margem ao topo ou apenas para o fundo ou e isso

21
00:01:59,720 --> 00:02:06,050
é algo que não existe em CSS, você pode adicionar uma margem vertical de 10 para ter uma margem para o

22
00:02:06,050 --> 00:02:08,560
topo e bottom, mas não à esquerda e

23
00:02:08,720 --> 00:02:15,770
à direita, e é um exemplo de como isso é baseado em CSS, mas não é o mesmo, porque margin vertical não seria

24
00:02:15,860 --> 00:02:23,210
uma propriedade que você tem em CSS, você tem em React Native. Então, se salvarmos isso e

25
00:02:23,210 --> 00:02:29,840
adicionarmos Reagir Nativa aqui, agora você verá que há algum

26
00:02:30,030 --> 00:02:38,430
espaçamento entre esses itens e, claro, também no iOS, se fizermos isso lá.

27
00:02:38,550 --> 00:02:46,440
Então isso agora adiciona nossos itens e, embora provavelmente ainda não ganhemos um prêmio de beleza, é um bom começo, pelo menos, e vamos mergulhar mais fundo

28
00:02:46,440 --> 00:02:51,050
no estilo e tudo o que você pode fazer lá mais tarde neste curso, nós apenas

29
00:02:51,060 --> 00:02:54,090
temos que obter há passo a passo, é claro.

30
00:02:54,090 --> 00:03:00,750
Agora, uma coisa que temos que ajustar agora, a chave aqui sempre tem que estar no elemento raiz da sua lista, então o elemento

31
00:03:00,750 --> 00:03:01,460
que você

32
00:03:01,500 --> 00:03:05,730
está repetindo e nós não estamos apenas repetindo o texto, mas agora estamos repetindo a

33
00:03:05,730 --> 00:03:07,020
exibição inteira, portanto, a

34
00:03:07,320 --> 00:03:14,430
chave deve ser adicionada à exibição aqui, não ao texto na exibição. É por isso que recebi esse aviso, esse erro novamente, agora

35
00:03:14,430 --> 00:03:15,520
com a chave

36
00:03:15,600 --> 00:03:19,230
movida para a exibição em vez do texto, isso deve ter desaparecido.