RNMapbox 库未在“长按”事件上显示自定义标记图像

Question

使用“LongPress”事件，我尝试在 RNMapbox 地图上长按经度/纬度处设置地图图钉图像。当我长按某个区域时，我会记录控制台以确认我确实获得了经度/纬度，但从视觉上看，我没有看到地图图钉出现坐标。

环境：

React Native 版本：0.72.4 安卓API 34 @rnmapbox/地图版本10.1.13

示例组件代码：

import React, { View } from 'react';
import Mapbox from '@rnmapbox/maps';

Mapbox.setAccessToken('<access token>')

export default function ExampleMap () {
const [mapPinFeatures, setMapPinFeatures] = React.useState(null)
const [mapKey, setMapKey] = React.useState(Date.now())
const map = React.useRef(null)
const camera = React.useRef(null)

function onLongPress (data) {
   setMapPinFeatures({
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        id: 'collection',
        properties: {},
        geometry: {
          type: 'Point',
          coordinates: data.coordinates
        }
      }]
  })

  // Need to do this or changing the feature without re-rendering the ShapeSource causes Android version to crash
  setMapKey(Date.now())
}

  return (
<View style={{ flex: 1, width: '100%' }}>
      <Mapbox.MapView
        ref={(ref) => { map.current = ref }}
        styleURL={Mapbox.StyleURL.Light}
        style={{ flex: 1, width: '100%' }}
        zoomEnabled
        pitchEnabled={false}
        logoEnabled={false}
        scaleBarEnabled={false}
        onLongPress={onLongPress}
      >
        <Mapbox.Camera
          ref={(ref) => { camera.current = ref }}
          animationMode="moveTo"
          defaultSettings={{ zoomLevel: 13, centerCoordinate: [-0.1996, 5.5837] }}
        />
        {mapPinFeatures
          ? (
            <Mapbox.ShapeSource key={mapKey} shape={mapPinFeatures}>
              <Mapbox.SymbolLayer
                id={'pin'}
                style={{ iconImage: 'map_marker_start', iconAllowOverlap: false }}
              />
              <Mapbox.Images
               nativeAssetImages={['map_marker_start']}
             />
            </Mapbox.ShapeSource>
            )
          : null}
      </Mapbox.MapView>
</View>
  )
}

我尝试过使用必需/导入的图像，甚至 Android 资产图像（如下面的代码示例所示）。我知道资产图像存在，因为当我更改资产图像的名称时，我正确地收到错误：“我收到错误：“Mapbox 错误无法获取具有名称的本机可绘制...”

我还相信我正确遵循了此处描述的自定义图像示例： https://rnmapbox.github.io/docs/examples/SymbolCircleLayer/CustomIcon

有人遇到过这个问题并知道如何解决吗？

Answer 1

虽然我似乎无法使该解决方案与 Mapbox.Images 一起使用，但我相信我已经找到了解决方法。我决定使用 PointAnnotation 和 React Native Image 组件来渲染自定义标记图像。示例：

<Mapbox.PointAnnotation
  draggable
  ref={(ref) => {
    pointAnnotationRefs.current[pin.id] = ref
  }}
  id={pin.id}
  coordinate={pin.coordinates}>
  <View>
    <Image
     source={require(<image source>)}
     style={{ width: 40, height: 40 }}
     // Prevent rendering bitmap at unknown animation state
     fadeDuration={0}
     onLoad={() => {
       pointAnnotationRefs?.current?.[pin.id]?.refresh()
     }}
    />
  </View>
</Mapbox.PointAnnotation>

这里需要注意的另一件重要的事情是，当图像加载时，你需要刷新 PointAnnotation 渲染（Android 似乎没有这个，但我在 iOS 中渲染图像时遇到了很多问题）