React Native カスタムフォント

概要: このチュートリアルでは、React Nativeアプリにカスタムフォントをロードする方法を学習します。

パッケージの設定

ステップ1. ターミナルを開き、React Nativeディレクトリに移動します

ステップ2. このコマンドを実行して、expo-font、@expo-google-fonts/inter、およびexpo-splash-screenパッケージをインストールします

npx expo install expo-font @expo-google-fonts/inter expo-splash-screen Code language: JavaScript (javascript)

パッケージは以下のとおりです

• expo-font – カスタムフォントのロードを可能にします。
• expo-splash-screen – ネイティブのスプラッシュスクリーンの表示を管理します。
• @expo-google-fonts/inter – アプリにInterフォントをロードします。

カスタムフォントの使用

Interフォントを使用するためにApp.jsを変更します

import { useEffect } from 'react';
import { StyleSheet, SafeAreaView, Text } from 'react-native';
import { Inter_700Bold, Inter_400Regular, Inter_300Light, useFonts } from '@expo-google-fonts/inter';
import * as SplashScreen from 'expo-splash-screen';

SplashScreen.preventAutoHideAsync();

export default function App() {

  const [fontLoaded, error] = useFonts({
    Inter_400Regular,
    Inter_700Bold,
    Inter_300Light
  });

  useEffect(() => {
    if (fontLoaded || error) {
      SplashScreen.hideAsync();
    }
  }, [fontLoaded, error]);


  if (!fontLoaded && !error) {
    return null;
  }


  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontFamily: 'Inter_400Regular',
    fontSize: 40,
  }
});Code language: JavaScript (javascript)

動作方法。

まず、スプラッシュスクリーンを表示します

SplashScreen.preventAutoHideAsync();Code language: JavaScript (javascript)

次に、useFontsフックを使用してInterフォントファミリーを非同期にロードします

const [fontLoaded, error] = useFonts({
  Inter_400Regular,
  Inter_700Bold,
  Inter_300Light
});Code language: JavaScript (javascript)

useFontsフックは2つの値の配列を返します

• fontLoaded: フォントの読み込みが完了した場合true、それ以外の場合はfalse。
• error: フォントの読み込み中にエラーが発生した場合true、それ以外の場合はnull。

次に、フォントがロードされた場合、またはエラーが発生した場合にスプラッシュスクリーンを非表示にします

useEffect(() => {
  if (fontLoaded || error) {
    SplashScreen.hideAsync();
  }
}, [fontLoaded, error]);Code language: JavaScript (javascript)

次に、Inter_300Lightフォントを使用するtextスタイルを定義します

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontFamily: 'Inter_300Light',
    fontSize: 40,
  }
});Code language: JavaScript (javascript)

最後に、Textコンポーネントにtextスタイルを使用します

return (
    <SafeAreaView style={styles.container}>
        <Text style={styles.text}>Hello, World!</Text>
    </SafeAreaView>
);Code language: JavaScript (javascript)

まとめ

• アプリのカスタムフォントをロードするには、useFontsフックを使用します。