1. 程式人生 > >ReactNative使用精美圖示庫react-native-vector-icons(具體使用方法)

ReactNative使用精美圖示庫react-native-vector-icons(具體使用方法)

我自己配置時執行了安裝/關聯兩句命令就可以執行了, 沒有其他的錯誤

npm install --save react-native-vector-icons // 下載庫
react-native link react-native-vector-icons // 自動關聯

具體使用時請按照以下形式:

import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import FontAwesome from 'react-native-vector-icons/FontAwesome'
; <FontAwesome name={'wpforms'} size={30} color={tintColor} /> <MaterialCommunityIcons name={'face'} size={30} color={tintColor} />

解釋一下為什麼要這麼用.
react-native-vector-icons 的圖示分為幾個模組, 使用的時候先import FontAwesome from 'react-native-vector-icons/FontAwesome';

這樣才能使用 FontAwesome 標籤, 標籤內使用 name 欄位指定是某個圖示.

個人感覺這種使用形式還是有很大的不方便, 每個部分需要單獨匯入, 所以如果用到的圖示遍佈多個部分的話就需要 import 很多句, 對於強迫症來說是個噁心的地方, 如果有知道其他形式的麻煩告知下…