React Native Vector Icons无法使用求助：配置及图标查询问题

问题描述 #

已按照官方文档完成React Native Vector Icons的配置，但图标仍无法正常使用，具体情况：

• 尝试导入Entypo图标并使用相机图标：

  import { Entypo } from 'react-native-vector-icons';
  <Entypo name="camera" size={24} color="black" style={icons1} />
  

  出现导出错误。
• 更换为MaterialCommunityIcons：

  import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
  <Icon name="camera-outline" size={24} color="black" style={icons1}/>
  

  依然出现导出错误，移除图标代码后错误消失。

已完成的配置步骤：

1. 在android/settings.gradle中添加：

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

2. 在android/app/build.gradle的dependencies块中添加：

   implementation project(':react-native-vector-icons')
   

3. 在MainApplication.java中添加：

   import com.oblador.vectoricons.VectorIconsPackage;
   
   @Override
   protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           ...
           new VectorIconsPackage()
       );
   }
   

同时想了解：是否有可查看React Native CLI适用的所有React Native Vector Icons及使用示例的渠道？

排查与解决建议 #

1. 确认依赖安装与链接
   执行以下命令确保依赖完整安装并完成链接：

   npm install react-native-vector-icons --save
   npx react-native link react-native-vector-icons
   

   （注：RN 0.60+支持自动链接，但手动执行可确保链接生效）

2. 清理缓存并重建项目

   • 清理Android构建缓存：

     cd android && ./gradlew clean
     

   • 重置Metro缓存并重启服务：

     npx react-native start --reset-cache
     

   • 重新运行项目：

     npx react-native run-android
     

3. 验证图标名称与导入正确性

   • 确认图标名称对应正确的图标库：比如Entypo的相机图标名称确实是camera，MaterialCommunityIcons的相机轮廓图标是camera-outline，可通过本地依赖验证：
     进入node_modules/react-native-vector-icons/glyphmaps目录，查看对应库的JSON文件（如Entypo.json、MaterialCommunityIcons.json），确认目标图标名称存在。

4. 检查原生配置完整性
   确保MainApplication.java中VectorIconsPackage已正确添加到getPackages()列表，无拼写错误，且与其他ReactPackage的配置格式一致。

图标查询方式 #

无需跳转外部网站，可通过以下本地方式查看所有可用图标：

• 直接查看本地依赖：进入node_modules/react-native-vector-icons目录，每个图标库都有独立文件夹（如Entypo、MaterialCommunityIcons），其中的glyphmap.json文件包含该库所有图标名称。
• 项目内调试打印：临时添加代码打印目标库的所有图标名称：

  import { Entypo } from 'react-native-vector-icons';
  console.log('Entypo所有图标：', Entypo.glyphMap);
  

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