React Native 使用免費Icon ( ios )

如果你要寫 react native，又沒有使用ui框架的話，想要使用 icon，可以安裝react-native-vector-icons，他提供幾乎所有大家會用的 icon 字型。

 

 

第一步：安裝套件

如果過程中遇到問題，可以先至官網參考 ： Vector Icons

$ yarn add react-native-vector-icons

安裝好之後，可以到 node_modules/react-native-vector-icons/Fonts 路徑底下看你可以使用哪些免費的icons。
大家最常用的應該就是 FontAwesome 了。

因為我沒有使用react-native-cli ，是直接用npx起的專案，所以無法使用它官網介紹的 react-native link 方法，我是使用 CocoaPods來設定。

第二步：設定 Pod

//加入下面這行
pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'

執行指令

$ cd ios
$ pod update

第三步：設定Xcode

打開Xcode，然後cmd+O 選擇 /ios/XXX.xcodeproj

打開後，在Xcode中，專案名稱料夾點右鍵，選New Group

命名為Fonts。

並且把剛剛node_modules/react-native-vector-icons/Fonts 裡面找到的.ttf檔拖曳到Xcode中你剛剛建立的Fonts資料夾（你可以選擇你有用到的拉進去就好）。

修改info.plist

新增一個key，選擇Fonts provided by application。（滑鼠最後一個key，會出現＋的符號，點下去就可以再新增一個。）

展開Fonts provided by application，然後看你有幾個字型就新增幾個key，把字形檔名打在Value那邊。

第四步：在專案內引用

import Icon from 'react-native-vector-icons/AntDesign';
// ....
<Icon name="stepforward" />

設定好之後請記得重新run-ios。
如果你有遇到錯誤，類似 unrecognized font family ‘anticon’ 這種的，應該是第三步沒有做，設定好之後重新啟動專案即可。