Então, vamos estilizar esses componentes e, para isso, queremos aplicar algum estilo aos componentes de texto.
O componente de texto de fato suporta a propriedade de estilo, como
você pode verificar nos documentos oficiais, mas o componente de texto realmente suporta menos recursos de estilo do que a visualização e, portanto,
eu o
envolvo em outro componente de visualização e é apenas o componente de exibição estão importando do React
Native, essa também é a parte que eu quis dizer com você que só tem alguns componentes base, mas
eles vão te levar muito longe porque você trabalha com views e botões e textos o tempo todo.
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
mais opções de estilo.
Agora, novamente, não irei para estilos inline aqui, mas adicionarei estilos
à folha de estilo, por exemplo, poderíamos
nomear este item da lista, mas o nome é com você e vamos dizer aqui queremos ter um preenchimento de 10, vamos dar é
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
como um estilo a essa vista referindo-se a estilos. listItem aqui e com isso, se salvarmos
isso, agora nosso item de lista deve parecer um pouco melhor, aprender Reagir Nativo, é
assim que parece. Agora, alguns espaçamentos provavelmente também seriam bons, podemos
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
conteúdo ao redor, então os outros
elementos ao redor e lá, poderíamos adicionar margem 10 para adicionar uma margem em todas as direções, podemos também
adicionar uma margem ao topo ou apenas para o fundo ou e isso
é algo que não existe em CSS, você pode adicionar uma margem vertical de 10 para ter uma margem para o
topo e bottom, mas não à esquerda e
à direita, e é um exemplo de como isso é baseado em CSS, mas não é o mesmo, porque margin vertical não seria
uma propriedade que você tem em CSS, você tem em React Native. Então, se salvarmos isso e
adicionarmos Reagir Nativa aqui, agora você verá que há algum
espaçamento entre esses itens e, claro, também no iOS, se fizermos isso lá.
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
no estilo e tudo o que você pode fazer lá mais tarde neste curso, nós apenas
temos que obter há passo a passo, é claro.
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
que você
está repetindo e nós não estamos apenas repetindo o texto, mas agora estamos repetindo a
exibição inteira, portanto, a
chave deve ser adicionada à exibição aqui, não ao texto na exibição. É por isso que recebi esse aviso, esse erro novamente, agora
com a chave
movida para a exibição em vez do texto, isso deve ter desaparecido.