https://reactnavigation.org/docs/themes/

배경

앱 전역에서 theme(color)등을 사용할 수 있으면 매번 상대 경로를 통해 접근하지 않아도 되고, 재사용할 수 있어 편리하다.
react NavigationContainer는 react에서 최상위에 위치하여 하위 컴포넌트에 props를 자동으로 내려주고 있고, 이 중에는 theme을 내릴 수 있다. (Naviagation Container 속성 중 theme에 객체 할당하는 방법)

순서

1. theme 객체 생성(ex> "MyTheme")
2. theme 객체 내의 속성에 해당하는 값 입력
   : colors의 경우, primary,background,card,text,border,notification 등의 속성들이 있음.
3. 원하는 컴포넌트 내에서 useTheme hook을 통해 사용

기본 사용법

theme 객체 만들기

import * as React from 'react';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: 'rgb(255, 45, 85)',
  },
};

export default function App() {
  return (
    <NavigationContainer theme={MyTheme}>{/* content */}</NavigationContainer>
  );
}

theme 사용하기

import * as React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { useTheme } from '@react-navigation/native';

// Black background and white text in light theme, inverted on dark theme
function MyButton() {
  const { colors } = useTheme();

  return (
    <TouchableOpacity style={{ backgroundColor: colors.card }}>
      <Text style={{ color: colors.text }}>Button!</Text>
    </TouchableOpacity>
  );
}