Android だと問題なく動作していたアプリが、iOS で起動した途端、クラッシュするという不具合にぶち当たりました。
正しく表示されるページと、クラッシュする寸前に表示されるエラーメッセージを確認したところ、どうやら「react-native-vector-icons」を使用しているページでエラーが発生しているようでした。
Android 上では正しく動いていたので、コードは問題ないはず…。
ということは、インストールなどの事前準備で不足している作業があるはず！ということで、公式サイトを確認しながら、再インストールを試してみることにしました。
GitHub のページはこちら。
GitHub – oblador/react-native-vector-icons: Customizable Icons for React Native with support for NavBar/TabBar, image source and full styling.
https://github.com/oblador/react-native-vector-icons
まず、ライブラリのインストールは下記のコマンドを実行。
npm install --save react-native-vector-icons
その後、プラットフォーム毎に、それぞれ別の作業を行うのですが…これがうまくいきません…。
まず一つ目。
手動で node_modules/react-native-vector-icons 以下にある Fonts ディレクトリの中身を Xcode プロジェクトに追加し、更に Info.plist にも項目を追加する方法です。
Xcode の [プロジェクト名].xcworkspace を開き、 node_modules/react-native-vector-icons/Fonts をプロジェクトにドラッグします。
この時、「Add to targets」にチェックが入っていることを確認してください。
こちらが終わったら、次に Info.plist を更新します。
Xcode 上で変更してもいいのですが、私は面倒だったので、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>
上記を追加し終わったら、Xcode 上でアプリを一旦クリーンしてから、ビルドを行います。
…説明によればこちらで問題なくビルドに成功するはずなのですが、結果は失敗。
「error: linker command failed with exit code 1 (use -v to see invocation)」というエラーが発生してしまいました。
上記のエラーは、pod install --repo-update コマンドを実行するなど、CocoaPods で管理しているライブラリーを再インストールすれば治るとのことでしたが、私の環境では解決できませんでした。
設定が間違っているのか？と思い、一旦上の手順で追加した変更を全てリセットし、Pods や [プロジェクト名].xcworkspace も削除して、最初からやり直し。
次の方法を試すことにしました。
お次は、react-native link react-native-vector-icons コマンドを実行するだけ。
…が、こちらも同じエラーを吐いて失敗。
最後は、Podfile に下記のライブラリを追加する方法でした。
pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
が…そもそも、pod install コマンドの実行時にこのライブラリはインストールされていましたので、これはあまり効果がなさそうでした。
ということで、上記 3つの手順を試してみましたが、エラーは解決できず…。
ですが、私物の Macbook でサンプルコードを動かした時は上手くいったんです。
で、私物 Mac と 会社 Mac で違う点といえば…Xcode のバージョンなんですよね…。
Build System を Regacy Build System に変更してもダメでした。
…これは Xcode の不具合、もしくは最新の Xcode が React Native に対応していないという可能性があるかもしれません。
…最終手段「Xcode のバージョンダウン」が候補に入りましたね。
引き続き、格闘を続けたいと思います。
以上、React Native のアプリを iOS で実行した時に、「react-native-vector-icons」が正常に動作しないときの対処法でした。
解決策が見つかり次第、また記事にまとめたいと思います…。
