Question

带有自定义图像的标记 - 图像不会在发布时呈现，但在调试模式下显示正确！请问任何解决方案？

Answer 1

这是Android的图像渲染库Fresco的一个问题。最新版本的Fresco或React Native都没有包含任何修复。

有关详情和解决方法，请参阅此问题：https://github.com/react-community/react-native-maps/issues/1870

我结束了＃34;修复＆＃34; （规避）这个问题是不在Android上的标记/标注中渲染图像，而是使用在按下标记时弹出的模态。您可以使用一些条件渲染来继续在iOS上显示图像，但不能在Android上显示。

Answer 2

我也在努力解决这个问题，阅读react-native-maps/issues/1870中的各种帖子，这似乎对我有用（基于上面链接中的@outaTiME和@adlondon帖子）：

指定图像作为标记的支柱（而不是标记内的RN视图内的<Image />）似乎可以解决所有Android版本的此问题。但是，无法指定图像大小（使用<Image />时可能），这会使实施更加困难 - 请参阅react-native-maps/issues/1167
对于7.0以下的Android版本，您可以使用<Image />，但必须先预先加载图片，然后才能在标记中使用它们。这可以通过在渲染标记之前渲染尺寸= 0的标记图像来完成。在我实现更好的功能之前，我所做的解决方法是在1-2秒内延迟Map的显示，并从渲染0大小的图像开始。

我也尝试了以下对我不起作用的建议：

使用<ImageBackground />代替<Image />（似乎适用于某些人）

注意：我不确定7.0，它在不同的设备上表现不同，所以最好的方法是使用图像道具。

Answer 3

在此代码下方使用-

  key={marker.title}
  onPress={this.hideNearLocationPopup}
  >
  {marker.type === "fire"?
      <Image   source={require('../images/abc.png')} style = {{ width: 112, height: 25,borderRadius:3}}/>
      :
      <Image   source={require('../images/abc.png')} style = {{ width: 45, height: 25,borderRadius:3}}/>
      }
 </MapView.Marker>

使用自定义图像反应原生android-Markers

3 个答案: