react-native-vector-iconがシミュレーターで”？”になる

React Nativeのreact-native-vector-iconsを使用していると、iOSシミュレーターでアイコンが表示されずに"?"となることがあります。この問題は、カスタムフォントが正しくプロジェクトに追加されていない場合に発生します。本記事では、この問題を解決する方法を解説します。

※react-native-vector-iconsがインストールされていること。未インストールの方は以下をしてください。

npm i react-native-vector-icons
cd ios && pod install && cd ..

1. 解決方法

以下の手順で問題を解消できます。

Step 1: フォントファイルをXcodeに追加

1. フォントファイルの確認

   react-native-vector-iconsのフォントファイルは、プロジェクトのiosディレクトリ内に自動的に配置されています。具体的には、以下の場所を確認します：

   <YourProject>/ios/Fonts/
   

2. Xcodeでフォントファイルを追加

   XcodeでiOSプロジェクトを開き、左側のプロジェクトナビゲータで、プロジェクト名を選択。

   1.で確認したプロジェクトのFontsディレクトリ内にある必要な.ttfファイル（例: AntDesign.ttf）を、XcodeのプロジェクトのFontsディレクトリにドラッグ＆ドロップします。
   

3. コピー設定の確認

   ファイルを追加するときに、「Copy items if needed」にチェックを入れ、正しくコピーされるようにします。

Step 2: Info.plistにフォントを登録

1. Info.plistを編集

   プロジェクトのInfo.plistファイルを開きます。

2. Fonts provided by applicationを追加

   Custom iOS Target Propertiesに移動し、新しいキーFonts provided by applicationを追加します。

   配列内に、追加したフォントファイル名（例: AntDesign.ttf）を入力します。

Step 3: シミュレーターをリビルド

1. プロジェクトをクリーン

   以下のコマンドを使用してプロジェクトをクリーンにします：

cd ios
xcodebuild clean
cd ..

1. アプリを再ビルド

   以下のコマンドで再度アプリを起動します：

npx react-native run-ios

これでエラーや異常なくアイコンが表示されているはずです！

もし正しく表示されない場合は、コードにミスがある可能性が高いのでそちらを確認してください。