ReactNative で カスタムフォントを使用する

前提

• Project の名前は Hoge
• フォントのフルネームは、 Fuga, ファイル名は、Fuga.ttf

1.ttfファイルの配置

Hoge/assets/fonts/Fuga.ttf

（注意）
フォントのファイル名は、フォントのフルネームと一致させておくこと。
iOSでは、フォントのフルネーム、Androidでは、フォントのファイル名でロードさせるので、
フォントのファイル名をフォントのフルネーム名を一致させると、両方のOSで簡単に利用できます。

フォントのフルネームは、Macの場合、ファイルを右クリックして「情報を見る」→「フルネーム」で調べることができます

2. package.jsonの編集

下記の行を追加

"rnpm": {
"assets": ["./assets/fonts/"]
}

3. link

下記のコマンドを実行

$react-native link

下記が出力されるはず

rnpm-install info Linking assets to ios project
rnpm-install info Linking assets to android project
rnpm-install info Assets have been successfully linked to your project

4. 確認

$git diff
modified:   ios/Hoge.xcodeproj/project.pbxproj
modified:   ios/Hoge/Info.plist
modified:   package.json

Untracked files:
  (use "git add <file>..." to include in what will be committed)

android/app/src/main/assets/fonts/Fuga.ttf
assets/

• iOS
  • Projectファイルに、Fuga.ttfの参照が追加される
  • Info.plist に、Fuga.ttfという行が追加されている
• Android
  • android/app/src/main/assets/fonts/Fuga.ttfにコピーされる

5. Textタグの設定

<Text style={{fontFamily:'Fuga'}}>HogeHoge</Text>

参考にしたページ

https://medium.com/@danielskripnik/how-to-add-and-remove-custom-fonts-in-react-native-b2830084b0e4