所有自定义图像都不会显示在 PointAnnotations 上 - React Native Mapbox - @rnmapbox/maps

Question

尝试了网上找到的所有可能的解决方案，但我仍然遇到同样的问题，它只加载我尝试显示的 4 张图像中的 1 张图像。

我还尝试添加一个setTimeOut

<>
  {filteredList.map((item, i) => {
    return (
      <PointAnnotation
        coordinate={item.locations.coordinates}
        id={`pointAnnotation_${item._id}`}
        key={`pointAnnotation_${item._id}`}
        title={`current_${item._id}`}
        // anchor={{ y: 1, x: 0.5 }}
      >
        <View style={styles.locationWrapper}>
          <View style={styles.innerLocationWrapper}>
            <Image
              source={PIN}
              style={styles.imageStyle}
              resizeMode={'contain'}
            />
            <View
              style={[
                {
                  backgroundColor: item.dealType
                    ? DARK_PURPLE
                    : SELECTED_COLOR,
                },
                styles.kmWrapper,
              ]}>
              <Text style={styles.milesTextStyle}>
                {getDistance(item.locations)}
              </Text>
              {item.category && (
                <Ionicons
                  name={item.category.toLowerCase()}
                  color={WHITE}
                  size={10}
                />
              )}
            </View>
          </View>
        </View>
      </PointAnnotation>
    );
  })}
</>

Answer 1

我遇到了类似的问题，我相信这是由于在加载图像时未刷新 PointAnnotation （React Native Image 组件的 onLoad 函数）引起的。

这是让它发挥作用的示例：

<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>

这是我对自己问题的回答：https://stackoverflow.com/a/78399787/2079868