¿Cómo funciona el estilo en React Native?

Question

Accepted Answer

El estilo en React Native utiliza **objetos JavaScript** (no archivos CSS) — aplicados mediante la prop `style`, frecuentemente organizados con `StyleSheet`. Usa un **sistema de layout basado en Flexbox**. Los conceptos se parecen a CSS pero con sintaxis JavaScript y algunas diferencias. ## Estilo con 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', }, }); ``` Los estilos son **objetos JavaScript** con nombres de propiedades en **camelCase** (`backgroundColor`, no `background-color`); `StyleSheet.create` los organiza. También puedes pasar objetos en línea o arrays de estilos. ## Layout Flexbox (el predeterminado) ```jsx // React Native uses FLEXBOX for layout (like CSS flexbox, but flexDirection defaults // to 'column', not 'row') ``` ## Diferencias respecto a 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 qué es importante Comprender el estilo en React Native es fundamental porque **el estilo es esencial para construir cualquier UI**, y el enfoque de React Native difiere del CSS web, por lo que es conocimiento práctico imprescindible. React Native estiliza UIs con **objetos JavaScript** (mediante la prop `style`, organizados con `StyleSheet`) en lugar de archivos CSS — y comprender esto (nombres de propiedades en camelCase como `backgroundColor`, definir estilos como objetos JS, combinar estilos con arrays) es necesario para estilizar cualquier componente de React Native. Comprender el **sistema de layout basado en Flexbox** es particularmente importante: React Native usa Flexbox para layout (como CSS Flexbox, con flexDirection, justifyContent, alignItems), pero con la diferencia clave de que **flexDirection por defecto es 'column'** (no 'row' como en la web) — un punto común de confusión. Flexbox es el mecanismo de layout principal, por lo que comprenderlo es esencial para organizar UIs. Comprender las **diferencias respecto a CSS web** es importante especialmente para desarrolladores web: objetos JS con camelCase en lugar de archivos/clases CSS, valores numéricos sin unidades, un subconjunto de propiedades CSS (no todo lo que existe en la web), el flexbox por defecto en columna, y sin cascada/herencia como en CSS (los estilos son por componente) — estas diferencias son obstáculos comunes que entenderlas aclara. Aunque los conceptos se parecen a CSS (lo que lo hace accesible para desarrolladores web), la sintaxis y algunos comportamientos difieren, por lo que comprender el enfoque específico de React Native es necesario. Ya que el estilo es esencial para construir cualquier UI y el enfoque de React Native basado en objetos JS y Flexbox (con sus diferencias respecto a CSS web) es cómo se hace, comprender el estilo en React Native es conocimiento práctico esencial y fundamental — necesario para construir cualquier interfaz de React Native, e importante que los desarrolladores web entiendan las diferencias respecto a CSS, una habilidad central utilizada constantemente en el desarrollo de UI de React Native.