Estilizando a maneira nativa da reação

Aman Mittal Segue 14 de janeiro · 5 min ler Crédito : Unslpash – Blake Connally

O React Native vem com muitos componentes incorporados que você pode usar para estilizar aplicativos multiplataforma. Estilizar bem uma aplicação para dispositivos móveis é essencial. Não posso enfatizar o quanto é importante para um aplicativo móvel ter um design agradável e bom uso de cores. Sem uma interface de usuário aprimorada, um usuário em potencial será repelido pela falta de design no aplicativo para dispositivos móveis. Reagir Nativo usa JavaScript simples para estilizar. Neste tutorial, você explorará diferentes maneiras de estilizar um aplicativo React Native adquirindo experiência prática e dicas de aprendizado ao longo do caminho.

Introdução

Reagir Nativo usa JavaScript para estilizar, se você tem alguma experiência com o CSS da web, você sabe que estilizar um componente nada mais é do que escrever código usando a sintaxe de estilo apropriada. Se você não tem idéia do que é o CSS, eu gostaria que você parasse aqui, pois não haveria nenhuma vantagem para você ler este tutorial. Você precisa entender um pouco de CSS para continuar lendo o tutorial abaixo. Se você entende o que backgroundColor: 'blue' significa, então você está pronto para ir.

Reagir Native vem com muitos componentes internos, cada um com seu próprio conjunto específico de estilos. Esses estilos específicos podem ou não ser aplicáveis a outros componentes. Por exemplo, o componente Text suporta fontWeight enquanto o componente View não. No entanto, alguns dos estilos são semelhantes, mas não exatamente o mesmo. View suporta shadowColor enquanto o Text suporta textShadowColor . Por último, você deve observar que existem alguns estilos específicos de plataforma, como shadowPropTypesIOS .

Diferentes maneiras de estilizar um aplicativo nativo de reação

Existem diferentes maneiras de adicionar estilos ao seu componente React Native. O primeiro é o estilo inline . Veja o exemplo abaixo.

O resultado do código de snippet acima é o seguinte.

Em meu artigo anterior sobre Introdução ao React Native em 2019 sobre o objeto StyleSheet . É o segundo caminho.

Introdução ao React Native em 2019: crie seu primeiro aplicativo

Aprenda a criar seu primeiro aplicativo React Native com conceitos básicos importantes e para onde ir a partir daqui!

hackernoon.com