Estilos inline são muito fáceis de aplicar, mas sua desvantagem é que quanto mais complexo seu
aplicativo fica e sua configuração fica, seu componente fica, mais difícil é seguir junto com todos esses estilos inline.
Você terá um monte de código lá em cima, no seu código jsx e pode ser difícil de
ler, entender.
Portanto, embora você possa usar estilos in-line, recomenda-se usar
um objeto de folha de estilo e é exatamente isso que está sendo criado
lá embaixo.
Isso usa stylesheet que é uma classe no final fornecida pelo React Native, e
é por isso que nós importamos de lá e isso cria um objeto Javascript que contém toda a configuração do seu estilo.
A diferença para um objeto JavaScript vanilla que você também pode criar
sozinho assim é simplesmente essa folha de estilo. create no futuro também pode aplicar algumas otimizações de desempenho e aplicar seus estilos
de forma mais eficiente no final.
Portanto, você deve usar isso porque você não perde nada, mas no futuro, você pode
se beneficiar de otimizações adicionais. Agora, quando estou gravando isso, não há
diferença, mas novamente, você deve usar a folha de estilo. criar porque não vai doer e você pode obter
otimizações de desempenho adicionais no futuro. Outra vantagem de usar a folha de
estilo é que isso adicionará automaticamente alguma validação, o que significa que se você estiver usando uma propriedade de estilo
incorreta ou um valor incorreto, o React Native detectará isso e lançará um erro que simplesmente facilita
a localização tais erros, se
não houvesse validação, falhariam silenciosamente, simplesmente não aplicariam o estilo e você nem
mesmo veria isso instantaneamente ou veria que o estilo não está correto, mas você não vê realmente porque não
está funcionando, portanto, essa validação integrada é outra vantagem
de usar esse objeto de folha de estilo aqui. Para criar, você passa um objeto Javascript como
um argumento, então o argumento que você
passa aqui é um objeto Javascript e nesse objeto, você pode definir seus estilos
e você não faz isso adicionando padding 10 porque não está claro onde isso deve ser
aplicado, em
vez disso você usa qualquer nome de propriedade de sua escolha, como por exemplo a tela, para configurar o estilo para
a visualização geral da
tela, portanto, para esse nível superior aqui e você poderia ter escolhido
qualquer nome desejado aqui não precisa ser tela. Aqui, agora você tem um objeto
JavaScript aninhado, portanto, o valor dessa propriedade é outro objeto JavaScript
e, nesse caso, você configura o preenchimento 50, por
exemplo, de modo que o estilo também estava lá em cima.
Agora podemos remover esse estilo aqui, eu ainda tenho
a propriedade de estilo mas não tenho mais o objeto de estilo inline e agora, agora eu aponto
para estilos que é essa constante que contém nosso objeto de folha de estilo, eu aponto para estilos e então ponto,
eu aponto para o estilo da tela e é isso que eu quis dizer, você pode escolher qualquer nome que você
quer aqui, se você teria
chamado essa raiz, então você teria que usar root lá. Então você pode usar qualquer nome que quiser, você só
tem que
ter certeza de que os nomes que você usa lá embaixo encontram os nomes que você usa
aqui e agora diz ao React Native que essa visão deve ter os estilos definidos para a tela lá embaixo.
Você pode fazer o mesmo para o nosso contêiner de entrada,
digamos, mais uma vez este nome é totalmente até você, recipiente de entrada. Aqui, vou usar esse
objeto de estilo que apliquei como
um estilo inline a essa visualização antes e apliquei isso como meu valor para esse contêiner de entrada.
Agora, nessa perspectiva, nós referenciamos estilos. inputContainer, agora com alguma formatação automática
que você, a propósito, pode fazer no Visual Studio Code acessando preferências, atalhos de teclado
e pesquisando documentos em formato, esse é o atalho que deseja pressionar para que
os documentos sejam formatados automaticamente, o arquivo. Com isso, temos algumas estruturas de código limpas aqui,
vemos que esses são nossos estilos de contêiner de entrada e os aplicamos aqui.
Outra vantagem de ter esse objeto de folha de estilo também é que você pode aplicar o mesmo estilo
a várias exibições sem copiá-lo.
Então, se quisermos ter o estilo de contêiner de entrada, não apenas nessa visão, mas
também nesta, poderíamos simplesmente escrever estilos de estilo. inputContainer, você pode aplicar esse estilo a quantos
componentes desejar.
Agora, é claro, eu não preciso disso aqui, mas podemos usá-lo aqui, se precisarmos. Agora, o último estilo que quero aplicar está
na entrada de texto aqui.
Lá, vou apenas nomear essa entrada, muitas chaves, configurar meus estilos aqui
e depois na entrada de texto, consulte os estilos. entrada, assim.
E com isso, se salvarmos isso, teremos a mesma aparência de antes, mas agora estamos usando o objeto stylesheet que
facilita o compartilhamento e a reutilização de estilos, o que possivelmente nos renderá
otimizações futuras de desempenho e, além disso, nosso código jsx simplesmente é muito mais magro agora.