Apariencia

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 →

tsx

import {Appearance} from 'react-native';

El módulo Appearance expone información sobre las preferencias de apariencia del usuario, como su esquema de color preferido (claro u oscuro).

Notas para desarrolladores

Android

The Appearance API is inspired by the Media Queries draft from the W3C. The color scheme preference is modeled after the prefers-color-scheme CSS media feature.

iOS

The color scheme preference will map to the user's Light or Dark theme preference on Android 10 (API level 29) devices and higher.

Web

The color scheme preference will map to the user's Light or Dark Mode preference on iOS 13 devices and higher.

Note: When taking a screenshot, by default, the color scheme may flicker between light and dark mode. It happens because the iOS takes snapshots on both color schemes and updating the user interface with color scheme is asynchronous.

Ejemplo

Puedes usar el módulo Appearance para determinar si el usuario prefiere un esquema de color oscuro:

tsx

const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // Use dark color scheme
}

Aunque el esquema de color está disponible inmediatamente, este puede cambiar (por ejemplo, cambios programados al amanecer o atardecer). Toda lógica de renderizado o estilos que dependan del esquema de color preferido del usuario deben llamar a esta función en cada renderizado, en lugar de almacenar en caché el valor. Por ejemplo, puedes usar el hook de React useColorScheme que proporciona y se suscribe a actualizaciones del esquema de color, o usar estilos en línea en lugar de definir valores en un StyleSheet.

---

Referencia

Métodos

getColorScheme()

tsx

static getColorScheme(): 'light' | 'dark' | null;

Indica el esquema de color preferido actual del usuario. Este valor puede actualizarse posteriormente, ya sea por acción directa del usuario (ej: selección de tema en ajustes del dispositivo o estilo de interfaz a nivel de aplicación mediante setColorScheme) o programado (ej: temas claro/oscuro que siguen el ciclo día/noche).

Esquemas de color admitidos:

• light: El usuario prefiere un tema de color claro.

• dark: El usuario prefiere un tema de color oscuro.

• null: El usuario no ha indicado un tema de color preferido.

Ver también: hook useColorScheme.

Nota: getColorScheme() siempre devolverá light al depurar con Chrome.

---

setColorScheme()

tsx

static setColorScheme('light' | 'dark' | null): void;

Fuerza a la aplicación a adoptar siempre un estilo de interfaz claro u oscuro. El valor predeterminado null hace que la aplicación herede el estilo del sistema. Si asignas un valor diferente, el nuevo estilo se aplica a la aplicación y todos sus elementos nativos (Alertas, Selectores, etc).

Esquemas de color admitidos:

• light: Aplica estilo de interfaz de usuario claro.

• dark: Aplica estilo de interfaz de usuario oscuro.

• null: Sigue el estilo de interfaz del sistema.

Nota: El cambio no afectará el estilo de interfaz seleccionado por el sistema ni ningún estilo configurado en otras aplicaciones.

---

addChangeListener()

tsx

static addChangeListener(
  listener: (preferences: {colorScheme: 'light' | 'dark' | null}) => void,
): NativeEventSubscription;

Añade un manejador de eventos que se activa cuando cambian las preferencias de apariencia.