console.error : "fontFamily "Material Icons" is not a system font and has not been loaded through 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" is not a system font and has not been loaded through 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

导入图标

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

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

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

还值得检查图标是否存在，您可以在 directory 中执行此操作。