Skip to main content

외관

tsx
import {Appearance} from 'react-native';

Appearance 모듈은 사용자의 외관 설정, 예를 들어 선호하는 색상 스키마(라이트 모드 또는 다크 모드)와 같은 정보를 제공한다.

개발자 노트​

Appearance API는 W3C의 Media Queries 드래프트에서 영감을 받았다. 색상 스킴 선호도는 prefers-color-scheme CSS 미디어 기능을 기반으로 모델링되었다.

예제​

Appearance 모듈을 사용해 사용자가 어두운 색상 스키마를 선호하는지 확인할 수 있다:

tsx
const colorScheme = Appearance.getColorScheme();
if (colorScheme === 'dark') {
  // 어두운 색상 스키마 사용
}

색상 스키마는 즉시 사용 가능하지만, 이 값은 변경될 수 있다. 예를 들어 해가 뜨거나 지는 시간에 따라 예약된 색상 스키마 변경이 발생할 수 있다. 사용자 선호 색상 스키마에 의존하는 렌더링 로직이나 스타일은 값을 캐싱하기보다 매 렌더링마다 이 함수를 호출해야 한다. 예를 들어, 색상 스키마 업데이트를 제공하고 구독하는 useColorScheme React 훅을 사용하거나, StyleSheet에 값을 설정하는 대신 인라인 스타일을 사용할 수 있다.

참고 자료

메서드​

getColorScheme()​

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

현재 사용자가 선호하는 색상 스킴을 나타낸다. 이 값은 나중에 사용자의 직접적인 동작(예: 디바이스 설정에서 테마 선택 또는 setColorScheme을 통한 애플리케이션 수준의 사용자 인터페이스 스타일 선택)이나 일정에 따라(예: 낮/밤 주기에 따른 라이트 및 다크 테마) 업데이트될 수 있다.

지원되는 색상 스킴:

  • light: 사용자가 라이트 색상 테마를 선호함.
  • dark: 사용자가 다크 색상 테마를 선호함.
  • null: 사용자가 선호하는 색상 테마를 지정하지 않음.

참고: useColorScheme 훅도 확인해 보자.

주의: Chrome으로 디버깅할 때 getColorScheme()은 항상 light를 반환한다.

setColorScheme()​

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

애플리케이션이 항상 밝거나 어두운 인터페이스 스타일을 사용하도록 강제한다. 기본값은 null이며, 이 경우 애플리케이션은 시스템의 인터페이스 스타일을 상속한다. 다른 값을 할당하면 새로운 스타일이 애플리케이션과 애플리케이션 내의 모든 네이티브 엘리먼트(알림, 피커 등)에 적용된다.

지원되는 색상 스키마:

  • light: 밝은 사용자 인터페이스 스타일을 적용한다.
  • dark: 어두운 사용자 인터페이스 스타일을 적용한다.
  • null: 시스템의 인터페이스 스타일을 따른다.

참고: 이 변경은 시스템에서 선택한 인터페이스 스타일이나 다른 애플리케이션에서 설정된 스타일에 영향을 미치지 않는다.

addChangeListener()​

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

외관 설정이 변경될 때 실행되는 이벤트 핸들러를 추가한다.