Expo React Native在Xcode模拟器中字体路径错误致加载失败

问题描述 #

开发的Expo React Native应用在Xcode模拟器运行时，其他功能正常但字体无法加载：

• 本地项目字体存放在assets/fonts目录下
• 生成的ios文件夹中字体路径为assets/assets/fonts
• 模拟器中字体实际被放在.app根目录，但代码期望路径是.app/assets/assets/fonts，导致加载失败
• 修改加载路径匹配模拟器结构会和本地项目结构冲突

相关配置文件 #

App.json配置 #

{
  "expo": {
    "assetBundlePatterns": [
        "**/*"
    ],
    "fonts":{
        "GothamRoundedMedium":"./assets/fonts/gothamrnd_medium.otf",
        "GothamRoundedBold":"./assets/fonts/gothamrnd_bold.otf",
        "GothamRoundedLight":"./assets/fonts/gothamrnd_light.otf",
        "GothamRoundedBook":"./assets/fonts/gothamrnd_book.otf",
        "GothamNarrowMedium":"./assets/fonts/gotham_narrow/GothamNarrow-Medium.otf",
        "GothamNarrowXMedium":"./assets/fonts/gotham_narrow/GothamXNarrow-Medium.otf"
      },
    "name": "main",
    "displayName": "appname",
    "entryPoint": "./index.tsx",
    "slug": "appname",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "ios": {
      "supportsTablet": true,
       "bundleIdentifier": "com.anon.hsl",
      "buildNumber": "1.0.0"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "package": "com.anonymous.hsl"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    }
  }
}

Metro配置文件 #

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig: getDefaultExpoConfig } = require('expo/metro-config');
const { mergeConfig, getDefaultConfig } = require('@react-native/metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const expoConfig = getDefaultExpoConfig(__dirname);
const defaultConfig = getDefaultConfig(__dirname);

const { assetExts, sourceExts } = expoConfig.resolver;

const config = {
    transformer: {
        ...expoConfig.transformer,
        babelTransformerPath: require.resolve("react-native-svg-transformer/expo")
    },
    resolver: {
        ...expoConfig.resolver,
        assetExts: assetExts.filter((ext) => ext !== "svg"),
        sourceExts: [...sourceExts, "svg"]
    }
};

module.exports = mergeConfig(defaultConfig, expoConfig, config);

字体加载代码 #

const load_fonts = async() => {
  await Font.loadAsync({
    'GothamRoundedMedium': require('./assets/fonts/gothamrnd_medium.otf'),
    'GothamRoundedBold': require('./assets/fonts/gothamrnd_bold.otf'),
    'GothamRoundedLight': require('./assets/fonts/gothamrnd_light.otf'),
    'GothamRoundedBook': require('./assets/fonts/gothamrnd_book.otf'),
    'GothamNarrowMedium': require('./assets/fonts/gotham_narrow/GothamNarrow-Medium.otf'),
    'GothamNarrowXMedium': require('./assets/fonts/gotham_narrow/GothamXNarrow-Medium.otf'),
  });
};

解决方案 #

方案1：简化字体加载逻辑 #

Expo会自动处理字体打包映射，无需重复定义字体路径，直接复用app.json中的配置即可：

const load_fonts = async() => {
  // 直接加载app.json里预配置的字体，避免手动require导致路径冲突
  await Font.loadAsync(require('./app.json').expo.fonts);
};

方案2：修正Metro配置的asset处理 #

移除重复合并的默认配置，确保Expo的asset打包逻辑正常执行：

const { getDefaultConfig: getDefaultExpoConfig } = require('expo/metro-config');
const { mergeConfig } = require('@react-native/metro-config');

const expoConfig = getDefaultExpoConfig(__dirname);

// 确保otf字体被识别为asset
expoConfig.resolver.assetExts.push('otf');

const config = {
    transformer: {
        ...expoConfig.transformer,
        babelTransformerPath: require.resolve("react-native-svg-transformer/expo")
    },
    resolver: {
        ...expoConfig.resolver,
        assetExts: expoConfig.resolver.assetExts.filter((ext) => ext !== "svg"),
        sourceExts: [...expoConfig.resolver.sourceExts, "svg"]
    }
};

module.exports = mergeConfig(expoConfig, config);

方案3：清理缓存并重新构建 #

1. 清除Expo缓存：

expo r -c

2. 清除Xcode缓存：

• 打开Xcode，点击Product -> Clean Build Folder
• 删除模拟器中的应用，重新运行

方案4：确认字体文件被纳入Xcode项目 #

1. 执行expo prebuild重新生成ios目录
2. 打开Xcode，进入Build Phases -> Copy Bundle Resources，检查是否包含所有字体文件
3. 若缺失，手动添加assets/fonts下的所有字体文件

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