Estilos
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
Con React Native, das estilo a tu aplicación usando JavaScript. Todos los componentes principales aceptan una propiedad llamada style. Los nombres de estilo y valores generalmente coinciden con cómo funciona CSS en la web, excepto que los nombres se escriben usando camel case, por ejemplo backgroundColor en lugar de background-color.
La propiedad style puede ser un simple objeto JavaScript. Eso es lo que normalmente usamos en los ejemplos de código. También puedes pasar un array de estilos: el último estilo del array tiene precedencia, por lo que puedes usarlo para heredar estilos.
A medida que un componente se vuelve más complejo, suele ser más claro usar StyleSheet.create para definir varios estilos en un solo lugar. Aquí tienes un ejemplo:
Un patrón común es hacer que tu componente acepte una propiedad style que a su vez se usa para dar estilo a subcomponentes. Puedes usar esto para que los estilos "se propaguen en cascada" como lo hacen en CSS.
Hay muchas más formas de personalizar el estilo de texto. Consulta la referencia del componente Text para obtener una lista completa.
Ahora puedes hacer que tu texto sea hermoso. El siguiente paso para convertirte en un experto en estilos es aprender a controlar el tamaño de los componentes.
Problemas conocidos
- react-native#29308: En algunos casos React Native no coincide con cómo funciona CSS en la web, por ejemplo el área táctil nunca se extiende más allá de los límites de la vista principal y en Android no se admiten márgenes negativos.