React Native项目中galio-framework无法加载galio.ttf字体的解决咨询

我之前在Expo项目里用Galio Framework时也碰到过一模一样的问题，本质是Expo的资源加载机制和Galio默认的字体路径不兼容导致的，给你几个亲测有效的解决办法：

方法一：手动复制字体文件并配置到Expo #

这是最直接的方案，步骤如下：

• 找到你项目里node_modules/galio-framework/fonts目录下的galio.ttf文件，把它复制到你的Expo项目的assets/fonts文件夹里（如果没有这个文件夹，直接在项目根目录新建一个即可）。
• 打开项目根目录的app.json，在expo字段中添加字体配置：

  "expo": {
    // 保留你原有的其他配置
    "fonts": [
      {
        "asset": "./assets/fonts/galio.ttf"
      }
    ]
  }
  

• 最后重启Expo项目，记得加上清除缓存的命令：expo start -c，这样Expo就能正确识别并加载这个字体了。

方法二：用expo-font手动加载字体 #

如果方法一没生效，可以试试手动通过expo-font加载字体：

1. 先安装expo-font依赖：

   npm install expo-font
   

2. 在你的项目入口文件（比如App.js）中，使用useFonts钩子加载字体：

   import { useFonts } from 'expo-font';
   import { View, Text } from 'react-native';
   
   export default function App() {
     const [fontsLoaded] = useFonts({
       'Galio': require('./assets/fonts/galio.ttf'),
     });
   
     // 字体加载完成前显示加载状态
     if (!fontsLoaded) {
       return <View><Text>Loading fonts...</Text></View>;
     }
   
     return (
       // 这里放你的应用主体内容
     );
   }
   

3. 确保Galio组件使用的字体名称和你定义的'Galio'一致，这样图标和字体就能正常显示了。

方法三：重新安装Galio Framework #

如果上述方法都不行，可能是npm安装过程中字体文件丢失了，试试重新安装：

npm uninstall galio-framework
npm install galio-framework

安装完成后再回到方法一或方法二操作一遍。

内容的提问来源于stack exchange，提问作者myTest532 myTest532