React Native打包APK后@expo/vector-icons及自定义字体不显示问题咨询

1. 确认字体资源已正确配置到Expo配置文件 #

不管是自定义字体还是@expo/vector-icons，都需要在项目根目录的app.json（或expo.json）中声明资源路径，确保打包时能正确包含这些文件：

{
  "expo": {
    "assets": [
      "./assets/fonts/", // 自定义字体所在目录
      "./assets/images/"
    ]
  }
}

注意路径要和实际文件位置一致，打包时对路径大小写敏感，别写错。

2. 检查字体加载逻辑的正确性 #

必须确保所有需要的字体（包括vector icons对应的字体）都通过Font.loadAsync完成加载，且等待加载完成后再渲染App，避免提前渲染导致的显示异常：

import * as Font from 'expo-font';
import { FontAwesome } from '@expo/vector-icons';
import { AppLoading } from 'expo';
import { useState } from 'react';

async function loadFonts() {
  await Font.loadAsync({
    // 加载自定义字体
    'CustomFont-Regular': require('./assets/fonts/CustomFont-Regular.ttf'),
    // 加载vector icons的字体，直接扩展对应图标库的font对象
    ...FontAwesome.font,
  });
}

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  if (!fontsLoaded) {
    return (
      <AppLoading
        startAsync={loadFonts}
        onFinish={() => setFontsLoaded(true)}
        onError={(err) => {
          console.error('字体加载失败:', err);
          // 这里可以设置兜底逻辑，比如直接标记为加载完成，用系统字体替代
          setFontsLoaded(true);
        }}
      />
    );
  }

  return <YourAppMainComponent />;
}

重点：一定要处理加载错误，避免因字体加载失败导致应用崩溃。

3. 清理缓存后重新打包 #

Expo的缓存机制可能导致旧资源残留，字体没有被正确打包进APK。执行以下命令清理缓存后重新构建：

# 清理开发缓存
expo r -c
# 如果使用了预构建，清理预构建文件
expo prebuild --clean
# 打包Android时强制清理缓存
expo build:android -c

4. 验证字体文件的完整性 #

• 检查自定义字体文件（ttf/otf）是否损坏，用系统字体预览工具打开确认文件有效。
• 确保加载字体时使用的key和文件名完全匹配，比如加载'CustomFont-Regular'，对应的文件名必须是CustomFont-Regular.ttf，别出现拼写或大小写错误。

5. 针对@expo/vector-icons的额外处理 #

• 如果是bare workflow项目，需要手动链接图标库：

npx react-native link @expo/vector-icons

• 确认@expo/vector-icons版本和你的Expo SDK版本兼容，版本不匹配会导致打包后图标无法加载。

6. 崩溃兜底方案 #

为了避免因字体加载失败导致应用崩溃，给文本和图标设置兜底逻辑：

• 自定义文本组件添加fallback字体：

import { Text } from 'react-native';

function CustomText({ children, style }) {
  return (
    <Text 
      style={[
        style, 
        { 
          fontFamily: 'CustomFont-Regular', 
          fallbackFontFamily: 'sans-serif' // 加载失败时用系统字体
        }
      ]}
    >
      {children}
    </Text>
  );
}

• 图标组件添加错误捕获：

import { FontAwesome } from '@expo/vector-icons';
import { Text } from 'react-native';

function CustomIcon({ name, size, color }) {
  try {
    return <FontAwesome name={name} size={size} color={color} />;
  } catch (err) {
    // 图标加载失败时显示替代文本
    return <Text style={{ fontSize: size, color: color }}>?</Text>;
  }
}

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