React Native升级后Android与iOS端Material图标显示不一致求助

问题描述 #

将React Native从0.64.4升级至0.69.12后，Android应用中使用react-native-vector-icons/MaterialCommunityIcons组件的图标显示异常（表现为方块或乱码），但iOS端显示正常。已尝试清除npm/yarn缓存、执行gradle clean操作，问题仍未解决。

组件使用代码：

import Icon from 'react-native-vector-icons/MaterialCommunityIcons'

<Icon
    name={icon}
    size={isLearn ? 50 : iconSize}
    color={focused ? Colors.primary : '#757575'}
/>

图标显示对比：

可能的原因及解决方法 #

1. 依赖版本不兼容 #

RN 0.69.x对原生模块的处理逻辑有更新，旧版本的react-native-vector-icons可能存在适配问题。

• 升级至兼容版本：

  npm install react-native-vector-icons@latest --save
  # 或使用yarn: yarn add react-native-vector-icons@latest
  

2. Android原生配置失效 #

RN升级可能导致自动链接的配置被覆盖或失效：

• 检查android/app/build.gradle，确保在dependencies块前添加了字体打包脚本：

  apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
  

• 手动触发资源链接（RN 0.60+支持自动链接，但可手动确认）：

  npx react-native link react-native-vector-icons
  

• 若自动链接无效，手动复制字体文件：将node_modules/react-native-vector-icons/Fonts/MaterialCommunityIcons.ttf复制到android/app/src/main/assets/fonts目录（若无fonts文件夹则新建）。

3. 构建缓存或字体文件损坏 #

• 清理Android构建缓存：

  cd android && ./gradlew cleanBuildCache
  

• 删除android/app/src/main/assets/fonts下的旧字体文件，重新从node_modules复制最新的MaterialCommunityIcons.ttf。

4. ProGuard混淆移除字体文件 #

若开启了ProGuard，需添加规则防止字体相关代码被混淆：
在android/app/proguard-rules.pro中加入：

-keep class com.oblador.vectoricons.** { *; }
-keep class com.oblador.vectoricons.MaterialCommunityIcons { *; }

5. 图标名称变更 #

新版本的MaterialCommunityIcons可能调整了部分图标的命名，核实代码中使用的icon值是否与最新图标库的名称一致。

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