在RN在使用字體圖標

備註：本教程目前只有ios實踐。

因為教程網上教程很多已經不能用，或者本身不能用，我寫一篇簡單的個人實踐，當然已經在ios中實現了。

安裝

首先需要藉助第三方react-native-vector-icons。

npm install react-native-vector-icons --save

oblador/react-native-vector-icons?

github.com

下面顯示的是第三庫已經導入了我們需要的字體文件，你可以從中選擇自己想要的圖標庫。

添加字體

在項目的ios目錄找到Info.plist ，雙擊用xcode打開，添加一個屬性Fonts provided by application，然後在對應item裡面添加你想要的字體，比如你想要引用materialIcons字體，就填入materialIcons.ttf。

materialIcons圖標庫?

material.io

關聯

最後你需要用react native命令關聯一下。

react-native link

在項目中引用

import Icon from react-native-vector-icons/MaterialIcons;<View style={styles.add} onPress={() => this.addTodo()}> <Icon iconStyle={styles.addIcon} name="add" size={30} color="#52C0FE"/> </View>

重啟項目，你將看到

不好意思，圖有一點丑。項目還在開發中。

安卓的教程，react-native-vector-icons也給出了解決方案。

oblador/react-native-vector-icons?

github.com
推薦閱讀：