React Native で Google フォントを使用する

Shiv Yadav 2023年10月12日

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.