先日投稿した、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-icons を unlink すること。
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 で正常に動作しないときの対処法でした。
ご参考になれば幸いです。
