React Native Maps的MaterialIcon仅Android端无法显示问题咨询

• 字体资源未正确集成
  Android端需要确保Material Icons字体被打包进安装包。如果你用的是react-native-vector-icons，大概率是自动链接失败，得手动配置：
  在android/app/build.gradle文件末尾添加：

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

  同时检查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')
  

  配置完后执行cd android && ./gradlew clean再重新编译。

• MapView Marker的渲染机制差异
  Android的react-native-maps对Marker内的矢量图标组件支持有限，不像iOS那样顺畅。可以把MaterialIcon转成图片URI再传给Marker：

  1. 安装react-native-view-shot
  2. 用ViewShot捕获Icon组件生成URI，再赋值给Marker的icon属性。

• 字体名称不匹配
  Android端识别的Material Icons字体名称是MaterialIcons，如果代码里Icon组件的type参数写错，就会显示空白。确保代码里的配置是：

  <Icon name="你要用的图标名" type="MaterialIcons" size={24} color="#你的颜色" />
  

• 依赖版本冲突
  react-native-maps和react-native-vector-icons版本不兼容也会导致渲染异常。可以查看两个库的官方文档，找互相兼容的版本组合，然后重新安装依赖。

• 缓存残留问题
  Android的gradle缓存可能导致字体资源未更新，执行cd android && ./gradlew clean清理缓存后，再重新运行项目。

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