React Native Mapbox(@rnmapbox/maps)中PointAnnotations自定义图片无法全部显示

我尝试了网上能找到的所有解决方案，但仍存在问题：在MapView的PointAnnotation中循环渲染4个标注时，仅能加载1张PIN图片。尝试过添加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>
    );
  })}
</>

可行解决方向： #

• 避免资源引用复用冲突
  若所有Image使用同一个PIN资源引用，MapView标注渲染时可能出现资源复用问题。针对不同类型的图片资源可以这样处理：

  • 网络图片：每次返回新的资源对象，避免引用复用

    const getUniquePin = () => ({ uri: PIN.uri });
    

    然后在Image的source中使用getUniquePin()替代直接的PIN。
  • 本地图片：复制多份相同图片资源，用不同的require路径区分，比如require('./pin_1.png')、require('./pin_2.png')，循环时按索引对应不同资源。

• 强化组件唯一性标识
  确保key和id的绝对唯一性，可将循环索引加入标识中，避免React因复用组件导致图片不重新渲染：

  id={`pointAnnotation_${item._id}_${i}`}
  key={`pointAnnotation_${item._id}_${i}`}
  

• 预加载图片资源
  提前预加载PIN图片，确保渲染标注时资源已就绪：

  useEffect(() => {
    if (PIN.uri) {
      Image.prefetch(PIN.uri);
    }
  }, []);
  

• 检查样式布局
  确认styles.imageStyle设置了明确的宽高，避免图片因布局问题被隐藏或挤压：

  const styles = StyleSheet.create({
    imageStyle: {
      width: 30,
      height: 30,
      // 确保无overflow: hidden等隐藏图片的样式
    }
  });
  

• 改用PointAnnotation原生image属性
  如果MapView支持，直接使用PointAnnotation的image属性设置标注图片，替代自定义View中的Image：

  <PointAnnotation
    coordinate={item.locations.coordinates}
    id={`pointAnnotation_${item._id}_${i}`}
    key={`pointAnnotation_${item._id}_${i}`}
    title={`current_${item._id}`}
    image={PIN}
  />
  

内容的提问来源于stack exchange，提问作者vincent O