React Native에서 Google 글꼴 사용

Shiv Yadav 2024년2월15일

React React Font

이 게시물은 expo-google-fonts 라이브러리를 사용하여 고유한 글꼴을 React 기본 애플리케이션으로 가져오는 방법을 보여줍니다.

React Native에서 Google 글꼴 사용

우리 프로그램은 시작 단계로 몇 가지 상용구를 추가해야 합니다. 프로그램에 다음 코드를 추가합니다.

import {StatusBar} from 'expo-status-bar';
import {StyleSheet, Text, View} from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontSize: 24,
    color: "white",
  },
});

위의 코드는 기본 글꼴을 사용하며 다음과 같이 표시됩니다.

기본 글꼴

상용구가 구성되었으므로 프로젝트에 Expo-Google-Fonts 및 Expo-Font를 추가할 때가 왔습니다.

첫 번째 단계는 expo를 사용하여 라이브러리를 설치하는 것입니다. 여기에서 expo-google-font를 얻을 수 있습니다.

다음과 같이 expo-google-fonts를 설치할 수 있습니다.

expo install @expo-google-fonts/finger-paint

그 후에 앱의 헤더에 다음 가져오기 줄을 추가합니다.

import {FingerPaint_400Regular, useFonts,} from '@expo-google-fonts/finger-paint';

이 애플리케이션에서는 FingerPaint_400Regular 글꼴을 사용하고 useFonts는 애플리케이션 로드를 도와줍니다.

그런 다음 useFonts 후크를 사용하여 글꼴을 프로그램에 로드합니다. 그러면 텍스트 스타일의 글꼴 모음이 FingerPaint_400Regular로 설정됩니다.

import {FingerPaint_400Regular, useFonts,} from '@expo-google-fonts/finger-paint';
import {StatusBar} from 'expo-status-bar';
import {StyleSheet, Text, View} from 'react-native';

export default function App() {
  let [fontsLoaded] = useFonts({
    FingerPaint_400Regular,
  });
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello World!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontSize: 24,
    color: "white",
    fontFamily: "FingerPaint_400Regular",
  },
});

아마도 글꼴이 변경되지 않았거나 변경된 경우 예상한 유형으로 변경되지 않았을 것입니다. 서체가 로드되기 전에 애플리케이션이 로드되기 때문입니다.

이를 수정하려면 React Native에서 제공하는 AppLoading 구성 요소를 활용하여 글꼴이 로드될 때까지 스플래시 화면의 가시성을 유지해야 합니다.

AppLoading 구성 요소를 사용하기 전에 먼저 프로젝트에 추가해야 합니다. 구성 요소를 설치하려면 터미널에 다음 코드를 입력하십시오.

expo install expo-app-loading

그런 다음 앱의 헤더로 가져옵니다.

import AppLoading from 'expo-app-loading';

AppLoading을 활용하려면 앱에서 일부 조건부 렌더링을 수행해야 합니다.

AppLoading 구성 요소는 글꼴이 로드되기 전에 표시됩니다. 그러나 글꼴이 올바르게 로드되면 대신 기본 콘텐츠를 표시합니다.

코드는 다음과 같습니다.

import {FingerPaint_400Regular, useFonts,} from '@expo-google-fonts/finger-paint';
import AppLoading from 'expo-app-loading';
import {StatusBar} from 'expo-status-bar';
import {StyleSheet, Text, View} from 'react-native';

export default function App() {
  let [fontsLoaded] = useFonts({
    FingerPaint_400Regular,
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  } else
    return (
      <View style={styles.container}>
        <Text style={styles.text}>Hello World!</Text>
        <StatusBar style="auto" />
      </View>
    );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#000",
    alignItems: "center",
    justifyContent: "center",
  },
  text: {
    fontSize: 24,
    color: "white",
    fontFamily: "FingerPaint_400Regular",
  },
});

이제 다음 화면이 앱에 표시되어야 합니다.

Google 글꼴 FingerPaint

이 주제에 대한 논의는 끝났지만, 여전히 우리가 제기하고 싶은 것이 있습니다. 다른 글꼴을 사용하려는 경우 여기에 나열된 각 글꼴에 필요한 import 문은 expo-google-fonts 디렉토리에서 찾을 수 있습니다.

각 글꼴에는 import 문과 라이브러리가 있으므로 올바른 글꼴을 설치해야 합니다.

작가: Shiv Yadav

Shiv is a self-driven and passionate Machine learning Learner who is innovative in application design, development, testing, and deployment and provides program requirements into sustainable advanced technical solutions through JavaScript, Python, and other programs for continuous improvement of AI technologies.