React Native从0.70升级到0.74后react-native-vector-icons在Android构建中不显示

以下是针对RN 0.74升级后矢量图标不显示问题的几个可行修复方案，按优先级尝试：

• 替换Gradle字体配置逻辑
  RN 0.74使用的Gradle 8.x对插件语法有更严格的要求，原fonts.gradle可能存在兼容性问题。直接删除apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"这一行，然后在android/app/build.gradle中添加手动复制字体的任务：

  def vectorIconsFontsDir = file("../../node_modules/react-native-vector-icons/Fonts")
  tasks.register("copyVectorIconsFonts", Copy) {
      from vectorIconsFontsDir
      into "$projectDir/src/main/assets/fonts"
      include "*.ttf"
  }
  preBuild.dependsOn(copyVectorIconsFonts)
  

  这个任务会在构建前自动把字体复制到assets目录，替代原gradle脚本的功能。

• 强制清理缓存并重新链接
  执行以下命令彻底清理缓存并重新触发自动链接：

  # 清理node_modules和锁文件
  rm -rf node_modules package-lock.json yarn.lock
  npm install
  # 清理Android构建缓存
  cd android && ./gradlew clean
  rm -rf app/build ~/.gradle/caches
  # 重新链接图标库
  npx react-native link react-native-vector-icons
  # 重新构建项目
  npx react-native run-android
  

• 手动复制字体文件
  如果自动复制逻辑失效，直接手动操作：

  1. 在android/app/src/main下创建assets/fonts目录（如果不存在）
  2. 复制node_modules/react-native-vector-icons/Fonts下的所有.ttf文件到assets/fonts目录
  3. 重新构建项目

• 检查babel插件兼容性
  如果你使用了babel-plugin-react-native-vector-icons：

  1. 更新插件到最新版本：npm update babel-plugin-react-native-vector-icons
  2. 确认babel.config.js中的配置正确，比如：

     module.exports = {
       presets: ['module:metro-react-native-babel-preset'],
       plugins: [
         ['react-native-vector-icons', {
           iconFonts: ['AntDesign', 'FontAwesome5', 'Ionicons'] // 按需添加你用到的字体库
         }]
       ]
     };
     

• 移除手动链接残留代码
  RN 0.70+默认自动链接，升级前如果手动链接过图标库，检查MainApplication.java或MainApplication.kt中是否有new VectorIconsPackage()这类代码，直接删除避免冲突。

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