Appearance¶

1

import { Appearance } from 'react-native';

Модуль Appearance предоставляет информацию о предпочтениях пользователя относительно внешнего вида, например, предпочитаемую цветовую схему (светлую или темную).

Заметки разработчика

Пример¶

Вы можете использовать модуль Appearance, чтобы определить, предпочитает ли пользователь темную цветовую схему:

1
2
3
4

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

Хотя цветовая схема доступна сразу, она может меняться (например, запланированная смена цветовой схемы на восходе или закате). Любая логика рендеринга или стили, которые зависят от предпочитаемой пользователем цветовой схемы, должны стараться вызывать эту функцию при каждом рендеринге, а не кэшировать значение. Например, вы можете использовать хук React useColorScheme, поскольку он обеспечивает и подписывается на обновления цветовой схемы, или вы можете использовать встроенные стили, а не устанавливать значение в StyleSheet.

Методы¶

getColorScheme()¶

1

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

Указывает текущую предпочитаемую пользователем цветовую схему. Значение может быть обновлено позже, либо через прямое действие пользователя (например, выбор темы в настройках устройства или выбранный на уровне приложения стиль пользовательского интерфейса через setColorScheme), либо по расписанию (например, светлые и темные темы, которые следуют циклу день/ночь).

Поддерживаемые цветовые схемы:

• light: Пользователь предпочитает светлую цветовую тему.
• dark: Пользователь предпочитает темную цветовую тему.
• null: Пользователь не указал предпочитаемую цветовую тему.

См. также: useColorScheme.

setColorScheme()¶

1

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

Заставляет приложение всегда принимать светлый или темный стиль интерфейса. Значение по умолчанию — null, что заставляет приложение наследовать стиль интерфейса системы. Если вы присваиваете другое значение, новый стиль применяется к приложению и всем собственным элементам внутри приложения (оповещения, пикеры и т.д.).

Поддерживаемые цветовые схемы:

• light: Применить светлый стиль пользовательского интерфейса.
• dark: Применить темный стиль пользовательского интерфейса.
• null: Следовать стилю интерфейса системы.

addChangeListener()¶

1
2
3

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

Добавьте обработчик событий, который запускается при изменении предпочтений внешнего вида.

Комментарии