Блог

Главная - Вопросы по программированию - консоль.ошибка: «Семейство шрифтов «Material Icons» не является системным шрифтом и не было загружено через Font.LoadAsync

консоль.ошибка: «Семейство шрифтов «Material Icons» не является системным шрифтом и не было загружено через Font.LoadAsync

#react-native #react-native-vector-icons #vector-icons

#react-native #react-native-vector-icons #векторные значки

Вопрос:

Я пытаюсь добавить значок из 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>

но я получаю:

консоль.ошибка: «Семейство шрифтов «Material Icons» не является системным шрифтом и не было загружено через Font.LoadAsync

Я попытался использовать Font.LoadAsync

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

Есть идеи?

Комментарии:

1. Является ли это выставочным приложением?

2. Да, это приложение expo, которое я запускаю из vs code

3. react-native-vector-icons входит в состав Expo. Почему вы импортируете его таким образом? Вам не нужно будет этого делать, вы должны иметь доступ к ним из @expo/vector-icons без необходимости добавлять что-либо еще в свой package.json docs.expo.io/versions/latest/guides/icons

4. Это действительно работает, спасибо! 🙂

Ответ №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"
/>

Также стоит проверить, существует ли значок, вы можете сделать это в каталоге.