Saltar al contenido principal

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()​

Experimental

Probablemente habrá muchos cambios con rupturas de compatibilidad que no se anunciarán de manera confiable. Todo esto podría eliminarse, ¿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.