React Native安卓模拟器无法加载自定义字体问题求助

问题概述 #

• 已将JUST Sans Regular.ttf放置在./assets/fonts目录
• Web模拟器中使用字体正常，但安卓模拟器提示需通过Font.loadAsync加载字体
• 调用expo-font的Font.loadAsync时出现类型错误与MD5完整性校验警告
• 已执行npx react-native-asset链接资源，因依赖DateTimePicker使用安卓模拟器

附相关配置与代码：

react-native.config.js配置 #

module.exports = {
    project: {
        ios:{},
        android:{}
    },
    assets:['./assets/fonts/'],
}

原Job组件代码 #

export default function Job() {
  const [loaded] = Font.loadAsync({
    'JUST Sans Regular': require('../../assets/fonts/JUST Sans Regular.ttf'),
  });
  if (!loaded) {
    return null;
  }

return (
      <Text
        variant="headlineMedium"
        style={{ marginHorizontal: 18, marginTop: 5, fontFamily: 'JUST Sans Regular.ttf' }}
      >                                                           // tried JUST Sans Regular as well, both don't work
        Job Information
      </Text>
    )
}

文件结构 #

|   .gitignore
|   App.js
|   app.json
|   babel.config.js
|   package-lock.json
|   package.json
|   react-native.config.js
|            
+---assets
|   |   adaptive-icon.png
|   |   favicon.png
|   |   icon.png
|   |   splash.png
|   |   
|   \---fonts
|           JUST Sans ExBold.ttf
|           JUST Sans Regular.ttf
|           
+---node_modules
|   |   .package-lock.json
\---src
    \---screens
        |   Home.js
        |   Job.js
        |   TotalStats.js
        |   
        \---general
                Models.js
                Styles.js

核心问题分析 #

1. Font.loadAsync使用错误：原代码直接解构Font.loadAsync的返回值，但该方法返回的是Promise，并非可解构的状态数组，导致类型错误。
2. 字体名称不匹配：安卓系统识别的字体家族名称可能与文件名不一致，直接使用文件名（含空格或后缀）会导致加载失败。
3. MD5校验警告：大概率是字体文件路径错误、文件损坏，或资源链接未生效。

解决方案 #

1. 修正字体加载逻辑 #

使用expo-font提供的useFonts钩子（推荐），或通过useEffect配合async/await处理异步加载：

方案一：使用useFonts钩子

import { Text } from 'react-native';
import { useFonts } from 'expo-font';

export default function Job() {
  // 定义字体别名，避免空格问题
  const [fontsLoaded] = useFonts({
    JUSTSansRegular: require('../../assets/fonts/JUST Sans Regular.ttf'),
  });

  if (!fontsLoaded) {
    return null; // 可替换为自定义加载指示器
  }

  return (
    <Text
      variant="headlineMedium"
      style={{ 
        marginHorizontal: 18, 
        marginTop: 5, 
        fontFamily: 'JUSTSansRegular' // 使用定义的字体别名
      }}
    >
      Job Information
    </Text>
  );
}

方案二：使用useEffect+Font.loadAsync

import { useState, useEffect } from 'react';
import { Text } from 'react-native';
import * as Font from 'expo-font';

export default function Job() {
  const [loaded, setLoaded] = useState(false);

  useEffect(() => {
    async function loadCustomFonts() {
      try {
        await Font.loadAsync({
          'JUST Sans Regular': require('../../assets/fonts/JUST Sans Regular.ttf'),
        });
        setLoaded(true);
      } catch (error) {
        console.error('字体加载失败:', error);
      }
    }
    loadCustomFonts();
  }, []);

  if (!loaded) {
    return null;
  }

  return (
    <Text
      variant="headlineMedium"
      style={{ 
        marginHorizontal: 18, 
        marginTop: 5, 
        fontFamily: 'JUST Sans Regular' // 使用loadAsync中定义的键名
      }}
    >
      Job Information
    </Text>
  );
}

2. 确认字体实际家族名称 #

安卓系统依赖字体文件内部的家族名称，而非文件名。可通过以下方式查看：

• Mac：打开Font Book，选中字体，查看「字体信息」中的「字体家族」和「样式」
• Windows：右键字体文件→「属性」→「详细信息」→「字体家族」

例如，若字体内部家族名为JUST Sans，样式为Regular，则fontFamily应设为JUST Sans，并配合fontWeight: 'normal'：

style={{
  // ...其他样式
  fontFamily: 'JUST Sans',
  fontWeight: 'normal'
}}

3. 修复资源链接与缓存 #

1. 重新执行资源链接命令：

npx react-native-asset

2. 清理安卓构建缓存：

cd android && ./gradlew clean && cd ..

3. 重新启动安卓模拟器并运行项目：

npx react-native run-android

4. 解决MD5校验警告 #

• 检查字体文件路径是否正确：确认require中的相对路径与文件结构匹配
• 重新复制字体文件：避免文件损坏，确保原文件完整
• 清除npm缓存并重新安装依赖：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

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