console.error : "fontFamily "Material Icons" 不是系統字體，還沒有通過 Font.loadAsync 加載

Question

我正在嘗試從 react-native-vector-icons/MaterialIcons 添加一個圖標：

import Icon from 'react-native-vector-icons/MaterialIcons';

<View style={styles.picture}>
  { <Icon
    name="add-circle"
    onPress={() => alert("Add Picture")}
    color="green"
  /> }
</View>

但我得到：

console.error : "fontFamily "Material Icons" 不是系統字體，還沒有通過 Font.loadAsync 加載

我嘗試使用 Font.loadAsync

await Font.loadAsync({'MaterialIcons': require('@expo/vector-icons/fonts/MaterialIcons.ttf')})

有任何想法嗎？

Answer 1

當您使用 Expo 時，您最好使用其中內置的圖標。

Expo 實際上帶有react-native-vector-icons 。 所以你不需要安裝任何東西。 您可以從@expo/vector-icons導入@expo/vector-icons

https://docs.expo.io/versions/latest/guides/icons/

import { MaterialIcons } from '@expo/vector-icons';

<MaterialIcons
  name="add-circle"
  onPress={() => alert("Add Picture")}
  color="green"
/>

還值得檢查圖標是否存在，您可以在目錄中執行此操作。