反応-ネイティブフォントが反応し、ネイティブ・ベクトルのアイコンIOSで使用します

反応-ネイティブフォントが反応し、ネイティブ・ベクトルのアイコンIOSで使用します

そこオンライン公式サイトの様々ながあり、インストールとiOS / Androidのための使用、使用することができ、基本的なインストールと同等に成功しました。

「反応するネイティブ・ベクトルアイコン/ FontAwesome」からFontAwesomeをインポートする時間を使用し、いくつかのモジュールに分割アイコンネイティブ・ベクトルアイコン反応; FontAwesomeタグを使用するために、名前フィールドを指定するタグを使用するアイコンであります。

1. プロジェクトアドオン依存：

   yarn add react-native-vector-icons

2. 使用Podfile修正ファイルCocoaPodsを iOS用には、このフォントライブラリをインストールします。

   vim project_dir/ios/Podfile
   pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
   在ios目录下执行pod install，使用CocoaPods安装这个依赖

3. 変更Info.plistファイルには、追加します。

   vim project_dir/ios/project_name/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>
   </array>

4. シンプルで実用的な

   import Icon from 'react-native-vector-icons/Ionicons';
   
   function ExampleView(props) {
     return <Icon name="ios-person" size={30} color="#4F8EF7" />;
   }
   
   不同的图标使用名字区分；上例的图标名字(Icon-->name)在[图标名字库](https://oblador.github.io/react-native-vector-icons/)里查找。
   在文件node_modules/react-native-vector-icons/glyphmaps/*.json里也可以看到所有图标的名字

5. アンドロイドで使用される：検証する、次に続くコマンドに関連付けられた（ステップ1）とすることができる、依存項目を追加すると言われています

   react-native link react-native-vector-icons

参考：

1. https://www.npmjs.com/package/react-native-vector-icons#examples
2. https://oblador.github.io/react-native-vector-icons/
3. https://www.jianshu.com/p/2b74ba057287
4. https://blog.csdn.net/yingBi2014/article/details/102933684