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’ 這種的,應該是第三步沒有做,設定好之後重新啟動專案即可。

學習程式原來可以這麼簡單:六角學院線上課程

初學者如何成為vue前端工程師:查看課程內容

---------------------------

| 軟體開發 | 網站建置 | 網頁系統 | 資料庫網站 |

| 客製化網站 (報名系統、投票系統、掛號系統...) |

| 前後端技術合作 |

歡迎與我們聯繫:jessica@penueling.com

加入Line立即聊聊:@539mjyid

0
0 回復

發表評論

Want to join the discussion?
Feel free to contribute!

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。