Como funciona o estilo no React Native?

Question

Accepted Answer

O estilo no React Native usa **objetos JavaScript** (não arquivos CSS) — aplicados via a prop `style`, frequentemente organizados com `StyleSheet`. Ele usa um **sistema de layout baseado em Flexbox**. Os conceitos se assemelham ao CSS, mas com sintaxe JavaScript e algumas diferenças. ## Estilo com objetos JavaScript ```jsx import { StyleSheet, View, Text } from 'react-native'; function Card() { return ( Hello ); } // StyleSheet.create — define styles as JS objects (camelCase properties) const styles = StyleSheet.create({ card: { padding: 16, backgroundColor: '#fff', // camelCase (not background-color) borderRadius: 8, }, title: { fontSize: 18, fontWeight: 'bold', color: '#333', }, }); ``` Os estilos são **objetos JavaScript** com nomes de propriedades em **camelCase** (`backgroundColor`, não `background-color`); `StyleSheet.create` os organiza. Você também pode passar objetos inline ou arrays de estilos. ## Layout Flexbox (o padrão) ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## Diferenças do CSS web ```text ✓ JS objects, camelCase props; no CSS files/classes; values often unitless numbers ✓ FLEXBOX by default (flexDirection defaults to 'column', unlike web's 'row') ✓ A subset of CSS properties (not everything web CSS has); some RN-specific behavior ✓ No cascade/inheritance like CSS (styles are per-component); use style arrays to combine ``` ## Por que isso importa Entender o estilo no React Native é fundamental porque **estilo é essencial para construir qualquer UI**, e a abordagem do React Native difere do CSS web, então é conhecimento prático imprescindível. O React Native estiliza UIs com **objetos JavaScript** (via a prop `style`, organizados com `StyleSheet`) em vez de arquivos CSS — e entender isso (nomes de propriedades em camelCase como `backgroundColor`, definindo estilos como objetos JS, combinando estilos com arrays) é necessário para estilizar qualquer componente React Native. Entender o **sistema de layout baseado em Flexbox** é particularmente importante: React Native usa Flexbox para layout (como CSS Flexbox, com flexDirection, justifyContent, alignItems), mas com a diferença chave de que **flexDirection tem padrão 'column'** (não 'row' como na web) — um ponto comum de confusão. Flexbox é o mecanismo de layout primário, então entendê-lo é essencial para organizar UIs. Entender as **diferenças do CSS web** é importante especialmente para desenvolvedores web: objetos JS com camelCase em vez de arquivos/classes CSS, valores numéricos sem unidades, um subconjunto de propriedades CSS (nem tudo que a web tem), o padrão column do flexbox, e sem cascata/herança como CSS (estilos são por componente) — essas diferenças são obstáculos comuns que o entendimento clarifica. Embora os conceitos se assemelhem ao CSS (tornando-o acessível para desenvolvedores web), a sintaxe e alguns comportamentos diferem, então entender a abordagem específica do React Native é necessário. Como o estilo é essencial para construir qualquer UI e a abordagem do React Native com objetos JS e baseada em Flexbox (com suas diferenças do CSS web) é como é feito, entender o estilo no React Native é conhecimento prático essencial e fundamental — necessário para construir qualquer interface React Native, e importante para desenvolvedores web entenderem as diferenças do CSS, uma habilidade central usada constantemente no desenvolvimento de UI do React Native.