DrawerMenu的labelStyle字体失效：Android端非serif字体无法渲染

这问题我之前做RN项目时也碰到过！核心原因是Android和iOS对字体的处理逻辑完全不一样：iOS能直接识别系统字体或已导入的自定义字体名称，但Android不会自动加载非系统自带的字体（比如Verdana、Times New Roman这类iOS默认有但Android没有的字体，或者你的自定义TTF），必须手动把字体文件导入到Android项目里并正确配置。

下面是一步步的解决方法：

1. 准备并导入字体文件到Android项目 #

• 先找到你需要的字体文件（比如Verdana.ttf、TimesNewRoman.ttf，自定义TTF就用你的字体文件），注意文件名不能有空格或特殊字符，比如把Times New Roman.ttf改成TimesNewRoman.ttf。
• 在RN项目的android/app/src/main/assets/目录下，新建一个fonts文件夹（没有的话就创建），把字体文件放进去。最终路径应该是android/app/src/main/assets/fonts/Verdana.ttf这样的格式。

2. 在代码里兼容iOS和Android的字体配置 #

iOS可以直接用字体名称，而Android需要对应assets里的字体文件名（不带.ttf后缀），所以用Platform.select来区分配置：

import { Platform } from 'react-native';

// 你的DrawerOptions配置
const drawerOptions = {
  labelStyle: {
    fontFamily: Platform.select({
      ios: 'Verdana', // iOS直接使用字体名称
      android: 'Verdana' // Android使用assets/fonts里的文件名（不带.ttf）
    }),
    fontSize: 16, // 可根据需求添加其他样式
    color: '#333'
  },
  // 其他Drawer配置项...
};

如果是自定义TTF字体，比如你的字体文件叫MyCustomFont.ttf，那Android端就写'MyCustomFont'即可。

3. 清理缓存并重启项目 #

有时候Android的缓存会导致字体不生效，所以执行以下步骤：

• 关闭RN的metro服务
• 进入android目录，执行./gradlew clean（Windows用户用gradlew clean）
• 重新启动RN项目：npx react-native run-android

常见踩坑提醒 #

• 为什么serif能生效？因为serif是Android系统自带的默认字体，不需要额外导入；而Verdana、Times New Roman这类不是Android默认自带的，所以必须手动导入字体文件。
• 字体文件名一定要和代码里的fontFamily值完全一致，大小写也要注意！比如文件是Verdana-Bold.ttf，代码里就得写'Verdana-Bold'。

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