react-native字體react-native-vector-icons在ios下的使用

react-native字體react-native-vector-icons在ios下的使用

官網和網上有各種針對ios/android的安裝和使用方法；能夠使用了，基本就等於安裝成功了。

react-native-vector-icons 的圖標分為幾個模塊, 使用的時候先import FontAwesome from 'react-native-vector-icons/FontAwesome'; 這樣才能使用 FontAwesome 標簽, 標簽內使用 name 字段指定某個圖標.

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. android下的使用：據說項目添加依賴后(執行步驟1)執行下面的命令關聯下就可以了，待驗證

   react-native link react-native-vector-icons
   

6. react-native-vector-icons自定義圖標

7. 生成svg和字體文件

參考：

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
5. https://www.jianshu.com/p/71e31894877a