Tech Blog - mixross

react-native-vector-iconsのインストール for iOS

ReactNative
このエントリーをはてなブックマークに追加
LINE

環境
react-native 0.63.1
react-native-vector-icons 7.0.0

ライブラリの追加

$ yarn add react-native-vector-icons
$ cd ios && pod install

iOS用の手動設定

公式の iOS -> Option: Manually の部分にある

①

Browse to node_modules/react-native-vector-icons and drag the folder Fonts (or just the ones you want) to your project in Xcode. Make sure your app is checked under "Add to targets" and that "Create groups" is checked if you add the whole folder.

と
②

Edit Info.plist and add a property called Fonts provided by application (or UIAppFonts if Xcode won't autocomplete/not using Xcode)

の部分を行ってからシミュレータを更新すると

error: Multiple commands produce...

といったエラーが発生。
中身を読むとnode_modules下のフォントをコピーするコマンドはPodのコマンドと被るよという内容っぽい。

上の①の操作をやめ、②だけ行えばビルドが通った。

つまり、以下の内容をInfo.plistの<plist> <dict>の中に追記するだけ。

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>
RSS