我在react native中收到错误- fontFamily“ionicons”不是系统字体

xsuvu9jc  于 2023-02-05  发布在  React
关注(0)|答案(8)|浏览(198)

我在react native中遇到以下错误- fontFamily“ionicons”不是系统字体,并且未通过Font. loadAsync加载。

  • 如果要使用系统字体,请确保键入的名称正确,并且设备操作系统支持该字体。

我正在尝试导入博览会矢量图标。

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

并使用图标

<Button transparent>
            <Ionicons name="md-checkmark-circle" size={32} color="green" />
        </Button>

但得到上述误差。

d4so4syb

d4so4syb1#

另一个可能的解决方案是我在几个小时的代码后偶然发现的,它与示例和前面的优秀答案相同。
如果你一直在升级世博会,这可能是你的答案。
1.删除节点模块
1.删除包-lock.json
1.运行expo install
1.运行expo start -c

zpqajqem

zpqajqem2#

如果nuking node_modules不起作用,那么请确保您没有安装多个版本的expo-font
1.从node_modules/expo/node_modules/expo-font/中删除expo-font
1.从node_modules/expo/package.json的依赖项列表中删除expo-font
1.运行expo r -c
有关详细信息,由于安装了多个版本的expo-font,Expo无法加载字体。

kmpatx3s

kmpatx3s3#

@expo/vector-icons仅默认安装在通过expo init --的模板项目上,它是expo包的一部分。
如果使用react-native init创建项目,请改用react-native-vector-icons

    • 安装**
npm i react-native-vector-icons

react-native link react-native-vector-icons
    • 用法**
import Icon from 'react-native-vector-icons/Ionicons';

<Button transparent>
    <Icon name="md-checkmark-circle" size={32} color="green" />
</Button>
    • 或**

尝试在App.js中使用Font.loadAsync加载离子图标

async componentDidMount () {
    await Expo.Font.loadAsync({
        Ionicons: require('@expo/vector-icons/fonts/Ionicons.ttf'),
    });
kxkpmulp

kxkpmulp4#

loadAsync中添加Iconicons为我解决了这个bug。

async componentDidMount () {
    await Expo.Font.loadAsync({
        Ionicons: require('@expo/vector-icons/fonts/Ionicons.ttf'),
    });
kgsdhlau

kgsdhlau5#

我通过删除代码中的<Icon\>标记解决了这个问题。
在只为图标留下<Ionicons\>标签后,我得到了保存。

gstyhher

gstyhher6#

我已经通过expo upgrade修复了这个问题,以防其他人看到。

nwnhqdif

nwnhqdif7#

1.从package.json中删除expo-font
1.删除node_modulespackage.lock.json
1.运行npm installyarn install
1.运行npm startyarn start

rvpgvaaj

rvpgvaaj8#

这些建议对我都不起作用,我找到了ionicons.ttf文件here,下载并复制到我的字体文件夹中,然后这样链接:

let [fontsLoaded] = useFonts({
        'Ionicons': require('./assets/fonts/ionicons.ttf'),
      });
    
      if (!fontsLoaded) {
        return ( ... );
      } else {
    
        return ( ... )
    }

希望这能帮到什么人。

相关问题