图像不会显示在 PointAnnotations 上 - React Native MapboxGL

Question

我正在从 react-native-maps 过渡到 rnmapbox，但在让任何图像显示在标记上时遇到问题。我正在渲染图像标记和某些标记的附加徽章。此问题仅在使用图像时出现，CSS 标记工作正常。

左边的图像是我使用 React Native Maps 时的预期结果，右边的图像是使用 MapboxGL 的结果。

下面是我的代码片段：

<MapboxGL.PointAnnotation
  key={"vehicle-" + vehicle._id}
  id={"vehicle-" + vehicle._id}
  coordinate={[vehicle.longitude, vehicle.latitude]}
  anchor={
    vehicle.status !== "riding" &&
    vehicle.status !== "adminCollected" &&
    vehicle.status !== "warehoused"
      ? { x: 0.5, y: 1 }
      : { x: 0.5, y: 0.5 }
  }
  onSelected={() => centerOnMarker(vehicle)}
>
  <View style={{ height: 75, width: 75 }}> {/* sized used for testing */}
    {vehicle.status === "available" ? (
      vehicle.batteryPercentage > 65 ? (
        <Image
          source={require("../../assets/scooter-pins/green-full.png")}
          style={{ height: 54, width: 43.5 }}
        />
      ) : vehicle.batteryPercentage > 30 && vehicle.batteryPercentage < 66 ? (
        <Image
          source={require("../../assets/scooter-pins/green-medium.png")}
          style={{ height: 54, width: 43.5 }}
        />
      ) : (
        <Image
          source={require("../../assets/scooter-pins/green-low.png")}
          style={{ height: 54, width: 43.5 }}
        />
      )
    ) : vehicle.status === "riding" ? (
      <View style={{ ...styles.vehicleDot, backgroundColor: "#0096FF" }} />
    )}
    {vehicle.task &&
      vehicle.status !== "riding" &&
      vehicle.status !== "adminCollected" &&
      vehicle.status !== "warehoused" && (
        <View
          style={{
            ...styles.vehicleTaskBadge,
            backgroundColor:
              vehicle.task.colour === "red"
                ? "#FF0000"
                : vehicle.task.colour === "orange"
                ? "#FF8C00"
                : "#D3D3D3",
          }}
        >
          <Text
            style={{
              color: "#FFF",
              fontWeight: "bold",
              textAlign: "center",
              fontSize: 12,
            }}
          >
            {vehicle.task.priority}
          </Text>
        </View>
      )}
  </View>
</MapboxGL.PointAnnotation>

任何帮助将不胜感激，因为我在过去的几个小时里一直在尝试不同的事情。

Answer 1

因此，一旦图像加载，您就需要重新渲染标记。

<MapboxGL.PointAnnotation
  ref={ref => (this.markerRef = ref)}
  key={"vehicle-" + vehicle._id}
  id={"vehicle-" + vehicle._id}
  coordinate={[vehicle.longitude, vehicle.latitude]}
  onSelected={() => centerOnMarker(vehicle)}
>
  <View style={{ height: 75, width: 75 }}> {/* sized used for testing */}
    <Image
      source={require("../../assets/scooter-pins/green-full.png")}
      style={{ height: 54, width: 43.5 }}
      onLoad={() => this.markerRef.refresh()}
    />
  </View>
</MapboxGL.PointAnnotation>

添加引用并刷新标记后，一切都会正常运行。