React Native에서 사용자 색상 선호도를 감지하는 방법

React Native에는 사용자의 외모 기본 설정을 결정하는 두 가지 방법이 있습니다.

현재 색 구성표를 가져올 수 있는 Appearance API

최신 색 구성표를 제공하는 useColorScheme 후크(사용자의 기본 설정이 변경되면 자동으로 업데이트됨)

이 게시물은 원래 posted on React Native School 이었습니다. React Native School을 방문하여 170개 이상의 튜토리얼과 18개 코스에 액세스하세요!

오늘 우리는 useColorScheme 후크를 활용할 것입니다.

검은색 텍스트와 흰색 배경(밝은 색 구성표)을 보여주는 다음 화면을 살펴보겠습니다.

import React from "react"
import { View, Text, ViewStyle, TextStyle, StyleSheet } from "react-native"

const App = () => {
  const viewStyles: ViewStyle[] = [
    styles.container,
    { backgroundColor: "white" },
  ]
  const textStyles: TextStyle[] = [styles.text, { color: "black" }]

  return (
    <View style={viewStyles}>
      <Text style={textStyles}>Hello, world!</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontWeight: "bold",
    fontSize: 20,
  },
})

export default App

useColorScheme 후크를 사용하여 사용자가 선호하는 색 구성표를 결정하고 그에 따라 색을 변경할 수 있습니다.

import React from "react"
import {
  View,
  Text,
  ViewStyle,
  TextStyle,
  StyleSheet,
  useColorScheme,
} from "react-native"

const App = () => {
  const colorScheme = useColorScheme()
  const isLightTheme = colorScheme === "light"

  const viewStyles: ViewStyle[] = [
    styles.container,
    { backgroundColor: isLightTheme ? "white" : "black" },
  ]
  const textStyles: TextStyle[] = [
    styles.text,
    { color: isLightTheme ? "black" : "white" },
  ]

  return (
    <View style={viewStyles}>
      <Text style={textStyles}>Hello, world!</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontWeight: "bold",
    fontSize: 20,
  },
})

export default App

NOTE: If you have the chrome debugger enabled useColorScheme will always return 'light'.

useColorScheme으로 재사용성 향상

현재 컴포넌트는 사용할 색상을 결정하기 위해 색상 테마를 알아야 합니다. 테마를 기반으로 색상을 정의하는 Colors 객체에 앱 색상을 넣을 수 있습니다.

그런 다음 구성 요소에서 colors.background 또는 colors.text 를 사용하고 싶다고 말할 수 있습니다. 설명적인 것.

import React from "react"
import {
  View,
  Text,
  ViewStyle,
  TextStyle,
  StyleSheet,
  useColorScheme,
} from "react-native"

const Colors = {
  light: {
    background: "white",
    text: "black",
  },
  dark: {
    background: "black",
    text: "white",
  },
}

const App = () => {
  const colorScheme = useColorScheme()
  const colors = Colors[colorScheme]

  const viewStyles: ViewStyle[] = [
    styles.container,
    { backgroundColor: colors.background },
  ]
  const textStyles: TextStyle[] = [styles.text, { color: colors.text }]

  return (
    <View style={viewStyles}>
      <Text style={textStyles}>Hello, world!</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontWeight: "bold",
    fontSize: 20,
  },
})

export default App

TypeScript 팁: useColorScheme null 유형 다루기

Colors[colorScheme]가 colorScheme일 수 있기 때문에 null에 액세스하려고 할 때 경고가 표시될 수 있습니다.

이것은 이 문제를 해결하는 방법에 대한 Expo Template에서 본 좋은 팁입니다.
useColorScheme 를 통해 반환 유형을 null이 아닌 것으로 변경하는 사용자 지정NonNullable 후크를 만들 수 있습니다.

// hooks/ColorSchemeName.ts

import {
  ColorSchemeName,
  useColorScheme as _useColorScheme,
} from "react-native"

// The useColorScheme value is always either light or dark, but the built-in
// type suggests that it can be null. This will not happen in practice, so this
// makes it a bit easier to work with.
export default function useColorScheme(): NonNullable<ColorSchemeName> {
  return _useColorScheme() as NonNullable<ColorSchemeName>
}

자신만의 useColorScheme 갈고리를 만드는 것도 다른 색 구성표를 "위조"하거나 이를 통해 신속하게 변경하려는 경우 좋습니다. _useColorScheme 의 결과를 반환하는 대신 dark 또는 light 를 반환할 수 있습니다.

사용자 지정 useThemeColors 후크

마지막으로 훨씬 더 재사용 가능한 코드를 작성하기 위한 노력의 일환으로 로직을 더욱 단순화하고 구성 요소가 현재 테마가 무엇인지 알 필요 없이 현재 테마의 색상만 반환하는 후크useThemeColors를 만들 수 있습니다.

// hooks/useThemeColors.ts
import useColorScheme from "hooks/useColorScheme"

const Colors = {
  light: {
    background: "white",
    text: "black",
  },
  dark: {
    background: "black",
    text: "white",
  },
}

const useThemeColors = () => {
  const colorScheme = useColorScheme()
  const colors = Colors[colorScheme]

  return colors
}

export default useThemeColors

Further reading: how to set up path alias', like shown above, in a React Native + TypeScript project.

이제 App.tsx는 다음과 같이 간단할 수 있습니다.

import React from "react"
import { View, Text, ViewStyle, TextStyle, StyleSheet } from "react-native"

import useThemeColors from "hooks/useThemeColors"

const App = () => {
  const colors = useThemeColors()

  const viewStyles: ViewStyle[] = [
    styles.container,
    { backgroundColor: colors.background },
  ]
  const textStyles: TextStyle[] = [styles.text, { color: colors.text }]

  return (
    <View style={viewStyles}>
      <Text style={textStyles}>Hello, world!</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  text: {
    fontWeight: "bold",
    fontSize: 20,
  },
})

export default App

이제 구성 요소 내에서 현재 테마나 해당 테마에 사용할 색상을 파악하기 위해 아무것도 할 필요가 없습니다. useThemeColors 후크는 모든 것을 캡슐화하고 UI 요소에 적합한 색상을 선택할 수 있는 색상 객체를 반환합니다.

확장된 예

React Native School's Clock example app 의 실제 예제에서 이 코드의 확장된 버전을 찾을 수 있습니다.