React-Native-Vector-Icons在Android SDK30-32显示异常，求解决方案

react-native-vector-icons无法正常显示，该问题仅出现在SDK版本30至32中，SDK33可正常工作。

Android项目SDK版本详情 #

buildscript {
    ext {
        buildToolsVersion = "31.0.0"
        minSdkVersion = 21
        compileSdkVersion = 31
        targetSdkVersion = 31
        ndkVersion = "21.4.7075529"
    }
...
}

package.json依赖信息 #

"react-native-vector-icons": "^9.2.0"
"react": "18.2.0"
"react-native": "^0.69.1"

已尝试但无效的方案 #

• 在app/build.gradle中添加：

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

• 在settings.gradle中配置：

  include ':react-native-vector-icons'
      project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
  

• 降级图标库版本
• 执行./gradlew clean后重新编译Android项目

可行解决思路 #

1. 确认字体文件是否正确打包

   • 手动检查android/app/src/main/assets/fonts目录，确保存在react-native-vector-icons的所有字体文件（如AntDesign.ttf、FontAwesome.ttf等）。如果缺失，直接从node_modules/react-native-vector-icons/Fonts目录复制所有文件到该路径。
   • 检查app/build.gradle的sourceSets配置，确保assets目录包含fonts文件夹，没有被错误覆盖。

2. 适配Android 11+的存储权限限制

   • 在AndroidManifest.xml中添加针对SDK32及以下的存储权限：

     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
     

   • 尝试升级react-native-vector-icons到最新稳定版（如10.x版本），旧版本可能未适配Scoped Storage导致路径加载异常。

3. 对齐compileSdkVersion与buildToolsVersion

   • 当前compileSdkVersion为31，尝试将buildToolsVersion升级到同版本的最新补丁（如31.0.2）；或者在业务允许的前提下，直接将compileSdkVersion和targetSdkVersion调整为33，再重新编译项目。

4. 修正gradle配置的路径问题

   • 确认settings.gradle中react-native-vector-icons的projectDir路径是否匹配你的项目结构，可临时改用绝对路径测试：

     project(':react-native-vector-icons').projectDir = new File("/your-project-full-path/node_modules/react-native-vector-icons/android")
     

   • 同步检查app/build.gradle中apply from的相对路径是否正确，尤其是多模块或monorepo项目。

5. 手动执行link命令关联

   • 运行npx react-native link react-native-vector-icons自动完成库和字体的关联配置，之后执行./gradlew clean && ./gradlew assembleDebug重新编译。

6. 排除混淆工具的影响

   • 如果项目开启了ProGuard/R8混淆，在proguard-rules.pro中添加豁免规则：

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

   • 避免字体文件或图标库代码被优化移除。

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