expo-font

オープンベータ版ドキュメント：本テクニカルドキュメントは、リリース前のオープンベータ版の一部としてAmazonから提供されるものです。ここで説明されている機能は、Amazonがフィードバックを受け取り、機能の開発を繰り返す過程で変更される可能性があります。最新の機能の情報については、リリースノートを参照してください。

@amazon-devices/expo-fontは、実行時にフォントを読み込み、React Nativeコンポーネントで使用するためのインターフェイスを提供します。

インストール
例
APIリファレンス
- フック
- メソッド
カスタムフォントの追加
サポートされているバージョン
関連リソース

インストール

package.jsonファイルにJavaScriptライブラリの依存関係を追加します。

クリップボードにコピーしました。

 dependencies: {
     ...
     "@amazon-devices/keplerscript-turbomodule-api": "~1.0.0",
     "@amazon-devices/expo-asset": "~2.0.0",
     "@amazon-devices/expo-constants": "~2.0.0",
     "@amazon-devices/expo-font": "~2.0.0",
     "expo": "~50.0.0",
     ...
 }

npm installコマンドを使用して、依存関係を再インストールします。

例

以下の例は、useFontsフックを使用してフォントを読み込む方法を示しています。この例を使用する場合は、.otfファイルをダウンロードし、useFontsの呼び出しの内容を置き換える必要があります。

クリップボードにコピーしました。

import {useFonts} from '@amazon-devices/expo-font';
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

export const App = () => {
  const [fontsLoaded] = useFonts({
    'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
  });

  if (!fontsLoaded) {
    return null;
  }

  return (
    <View style={styles.container}>
      <Text style={[styles.text, {fontFamily: 'Inter-Black'}]}>
        Inter Black
      </Text>
      <Text style={styles.text}>Platform Default</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: 'white',
  },
  text: {
    fontSize: 30,
    color: 'black',
  },
});

APIリファレンス

このライブラリの情報、APIリファレンス、その他の詳細については、 Expo公式ドキュメントのexpo-fontのページ（英語のみ）を参照してください。

フック

フック	説明
`useFonts`	`loadAsync`を使用して、フォントのマップを読み込みます。フォントが読み込まれて使用する準備ができたかどうかを示す`boolean`を返します。

メソッド

メソッド	説明
`isLoaded`	`fontFamily`のフォントの読み込みが完了したかどうかを同期的に検出します。
`isLoading`	`fontFamily`のフォントがまだ読み込み中かどうかを同期的に検出します。
`loadAsync`	静的リソースまたはリモートリソースからフォントを読み込む効率的なメソッドです。読み込まれたフォントは、プラットフォームのネイティブのテキスト要素で使用できます。
`processFontFamily`	フォントファミリー名をスコープ付きの名前に変換するために使用されます。スタンドアロンアプリやベアアプリで呼び出す必要はありませんが、そのようなコンテキストで呼び出した場合は、スコープのないフォントファミリー名が返されます。
`unloadAllAsync`	すべてのカスタムフォントの読み込みを解除します。これはテストに使用されます。
`unloadAsync`	指定された`fontFamily`とdisplay値に一致するカスタムフォントの読み込みを解除します。

カスタムフォントの追加

アプリでは、標準のVegaフォントを変更できるだけでなく、独自のカスタムフォントを読み込むこともできます。

カスタムフォントを読み込むには、フォントファイルをassets/fonts/ディレクトリに配置します。

フォントファイル名はフォントファミリー名と一致している必要があります。たとえば、フォントファミリー名がOpen Sansであるとしたら、フォントファイル名はOpen Sans.ttfにする必要があります。

サポートされているバージョン

パッケージのバージョン	ベース	@amazon-devices/react-native-kepler version
2.0.x	11.8.0	2.0.x