我正在用React Native构建一个应用，使用react-native-maps，但在自定义标记方面遇到了问题。我已经成功渲染了地图，标准标记工作正常，但当我尝试使用带图片或动画的自定义标记组件时，情况就会出错。

环境：

• React Native: 0.83.4
• react-native-maps: 1.29.0
• 平台：iOS和 Android（均已测试）
• 设备：真机和模拟器

问题：
我正在使用 react-native-maps，并遇到了三个关键问题：

1. 自定义标记图片（PNG、SVG）显示不稳定 - 有时能显示，有时不能显示。我尝试了本地图片配合 require()、远程图片配合 {uri: '...'}，以及不同的图片格式。
2. 无法为自定义标记制作动画 - Animated API不会执行任何动画，react-native-reanimated 会导致标记完全消失。
3. 正在寻找替代包 - 既然我在使用react-native-maps时遇到困难，我在想是否有其他包能更好地处理。

下面是我正在使用的代码：

第一种尝试是在Marker内部放一个简单的Image组件。有时能显示，有时不能：

// Custom image - inconsistent display  
<Marker coordinate={coord}>  
  <Image source={require('./marker.png')} />  
</Marker>

对于动画，我尝试把Image包裹在Animated.View中。结果动画根本没有执行：

// Animation attempt 1 - Animated API (does nothing)  
const scaleAnim = useRef(new Animated.Value(1)).current;  
<Marker coordinate={coord}>  
  <Animated.View style={{transform: [{scale: scaleAnim}]}}>  
    <Image source={require('./marker.png')} />  
  </Animated.View>  
</Marker>

我也尝试了react-native-reanimated。结果标记会完全消失：

// Animation attempt 2 - Reanimated (marker disappears)  
const animatedScale = useSharedValue(1);  
<Marker coordinate={coord}>  
  <Animated.View style={{transform: [{scale: animatedScale}]}}>  
    <Image source={require('./marker.png')} />  
  </Animated.View>  
</Marker>

期望行为：

• 自定义标记在所有设备上都能稳定显示
• 标记能够平滑动画（弹跳、脉冲、缩放、平滑移动）
• 同时适用于iOS和 Android

实际表现：

• 图像要么随机显示，要么根本不显示
• 动画要么无效，要么完全破坏标记渲染

我想要实现的目标：

• 平滑的标记移动（从点A 到点B，像实时跟踪）
• 脉冲环、跳动和缩放效果
• 自定义的动画标记组件（SVG/带渐变的View）
• 带过渡的平滑按压交互
• 支持50+个标记并保持60fps的性能

问题：

1. 为什么在react-native-maps中自定义标记图片不能稳定显示？是否有某个可靠的配置或包装可以使用？
2. 哪种动画实现方式最适合标记——Animated API、react-native-reanimated，还是其他？如何在不破坏自定义标记的前提下应用？
3. 如何在不阻塞触摸事件或引发渲染问题的前提下，为标记周围添加脉冲/波纹效果？
4. 在不降低性能的前提下，处理50+个标记并保持流畅动画的最佳做法是什么？

5. 替代包：是否有其他地图包能开箱即用地更好地处理自定义标记与动画？我在考虑：

6. react-native-leaflet-kit——内置脉冲动画和自定义图标

7. react-native-nitro-location-tracking——具备LocationSmoother，可实现平滑的标记移动和航向计算
8. react-native-map-supercluster——默认启用动画的聚类处理
9. 这些是否可靠的替代方案？还有其他值得考虑的吗？

我已经尝试过的：

• 使用本地图片的 require()
• 使用远程图片的 {uri: '...'}
• 不同的图片格式（PNG、JPG、SVG）
• 使用 Animated API，带View包装
• 使用 react-native-reanimated，配合共享值
• 不同的标记定位方法

参考视频：https://drive.google.com/file/d/1XaDFoUgKp6ZngPokO68Aect9098-D3_D/view?usp=drive_link

如果有人有可用的示例或GitHub仓库，请分享！

解决方案

我不确定你真的能否使用任何动画库。地图上的点最终并不是React组件。它更像一个画布，点被绘制在上面。

如果你确实需要自定义的东西——唯一的办法是看看是否可以通过原生代码实现动画，然后创建你自己的React Native模块（或Expo模块）。

另外还提到一个库react-native-clusterer。速度很快，但我不认为它也支持动画。