Saltar al contenido principal
Versión: 0.78

Hoja de estilo

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Una StyleSheet es una abstracción similar a las hojas de estilo CSS.

Consejos para calidad de código:

  • Al mover los estilos fuera de la función render, facilitas la comprensión del código.

  • Nombrar los estilos ayuda a dar significado a componentes de bajo nivel en la función render y fomenta su reutilización.

  • En la mayoría de IDEs, usar StyleSheet.create() ofrece comprobación de tipos estática y sugerencias para escribir estilos válidos.

Referencia

Métodos​

compose()​

tsx
static compose(style1: Object, style2: Object): Object | Object[];

Combina dos estilos donde style2 sobrescribe cualquier estilo en style1. Si alguno es falso, se devuelve el otro sin crear un array, ahorrando asignaciones y manteniendo igualdad referencial para comprobaciones de PureComponent.

create()​

tsx
static create(styles: Object extends Record<string, ViewStyle | ImageStyle | TextStyle>): Object;

Función identidad para crear estilos. El principal beneficio práctico de crear estilos dentro de StyleSheet.create() es la comprobación de tipos estática contra propiedades de estilo nativas.

flatten()​

tsx
static flatten(style: Array<Object extends Record<string, ViewStyle | ImageStyle | TextStyle>>): Object;

Consolida un array de objetos de estilo en un único objeto de estilo agregado.

setStyleAttributePreprocessor()​

ADVERTENCIA: EXPERIMENTAL. Es probable que ocurran cambios con rupturas de compatibilidad con frecuencia y sin anuncios confiables. Podría eliminarse por completo, ¿quién sabe? Úsalo bajo tu propio riesgo.

tsx
static setStyleAttributePreprocessor(
  property: string,
  process: (propValue: any) => any,
);

Define una función para preprocesar valores de propiedades de estilo. Se usa internamente para procesar colores y transformaciones. No deberías usarlo a menos que sepas exactamente lo que haces y hayas agotado otras opciones.

Propiedades​

absoluteFill​

Patrón muy común para crear superposiciones con posición absoluta y valores cero (position: 'absolute', left: 0, right: 0, top: 0, bottom: 0). absoluteFill simplifica esto y reduce duplicación. Puedes usarlo para crear entradas personalizadas en una StyleSheet, ej.:

absoluteFillObject​

A veces necesitas absoluteFill con pequeños ajustes - absoluteFillObject permite crear entradas personalizadas en una StyleSheet, ej.:

hairlineWidth​

Define el ancho de una línea delgada en la plataforma. Útil como grosor de bordes o separadores. Ejemplo:

Esta constante siempre será un número entero de píxeles (para líneas nítidas) e intentará coincidir con el ancho estándar de línea fina en cada plataforma. Sin embargo, no asumas que tiene tamaño constante, pues su cálculo varía entre plataformas y densidades de pantalla.

Una línea con grosor hairline podría no ser visible si tu simulador tiene escala reducida.