浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【React Native】iOSで「react-native-vector-icons」が正常に動作しない【解決済】

先日投稿した、React Native で開発したプロジェクトが、iOS で正常に動作しない現象が解決できたので手順をまとめ。
思ったよりも早く解決できたので、本当に良かったです…!

 

まず、Xcode のバージョンを確認します。
私は先日 12 にアップデートしたのですが…これを 11.6 にバージョンダウンします。
なお、旧バージョンの Xcode をダウンロードする方法については、こちらの記事を参考にさせていただきました。

Xcodeの旧バージョンをインストールする方法 – Qiita
https://qiita.com/TsukasaHasegawa/items/0d7d5c2cf3a2b8ce8993

Xcode のバージョンダウンが完了したら、プロジェクトの ios ディレクトリを開き、Pods ディレクトリと、[プロジェクト名].xcworkspace、と Podfile.lock を削除します。
その後、ターミナルアプリを開き、プロジェクトディレクトリまで移動したら、下記のコマンドを実行します。

npm install
cd ios/
pod install
cd ../

npx react-native link
npx react-native unlink react-native-vector-icons

ポイントは、react-native-vector-iconsunlink すること。
react-native link コマンドを使って、このライブラリとプロジェクトを紐づけるとエラーが発生するようなので、手動でリンクさせます。

リンク方法ですが、こちらは先日の記事で紹介した、1つ目の方法で行いました。
まず、Xcode で [プロジェクト名].xcworkspace を開き、 node_modules/react-native-vector-icons/Fonts をプロジェクトにドラッグします。
この時、「Add to targets」にチェックが入っていることを確認してください。

上記が終わったら、次に Info.plist を更新します。
Info.plist ファイルを 適当なエディターで開き、下記を追加してください。

<key>UIAppFonts</key>
<array>
  <string>AntDesign.ttf</string>
  <string>Entypo.ttf</string>
  <string>EvilIcons.ttf</string>
  <string>Feather.ttf</string>
  <string>FontAwesome.ttf</string>
  <string>FontAwesome5_Brands.ttf</string>
  <string>FontAwesome5_Regular.ttf</string>
  <string>FontAwesome5_Solid.ttf</string>
  <string>Foundation.ttf</string>
  <string>Ionicons.ttf</string>
  <string>MaterialIcons.ttf</string>
  <string>MaterialCommunityIcons.ttf</string>
  <string>SimpleLineIcons.ttf</string>
  <string>Octicons.ttf</string>
  <string>Zocial.ttf</string>
  <string>Fontisto.ttf</string>
</array>

やることは以上です。
あとは、一度プロジェクトを Clean してから Build を行います。
Clean しているので時間がかかりましたが、無事 Build に成功しました!
なお、一旦ビルドに成功したら、react-native run-ios コマンドが正常に動作するようになるので、もう Xcode は終了しても大丈夫です。

まさかの原因が Xcode という…。
Xcode の不用意な更新はダメですね…。
皆様もお気をつけください。

 

以上、React Native のライブラリ「react-native-vector-icons」が iOS で正常に動作しないときの対処法でした。
ご参考になれば幸いです。

  • この記事いいね! (0)