为什么在渲染四个地图标记后使用自定义地图标记，Expo和Apple Maps时，react-native-maps MapView崩溃？

问题描述

我正在研究一个Expo React Native项目，该项目使用react-native-maps渲染带有Markers列表的MapView组件。标记是呈现图像的自定义组件。使用Android和Google Maps进行测试时，所有功能都可以完美运行。使用iOS模拟器进行测试时，标记会出现，但地图运行缓慢。使用物理iPhone 7（和其他机型）进行测试时，该应用程序崩溃且没有错误消息。该应用程序始终会正确加载，直到呈现地图为止，该地图会在应用程序崩溃前显示一两秒钟。有时，这些标记还会在应用崩溃之前短暂显示。

如果我设置了要渲染标记的项目数限制，只要该限制小于5。同样，如果我指定要通过id加载的标记，则可以渲染每个标记，因此我不认为数据有误或导致未处理的异常。我需要列表中的所有项目以动态呈现，而对可以呈现的数量没有限制。如果我注释掉了Image组件，并且默认的红色别针标记出现在地图上，没有任何问题。问题似乎与如何在Apple地图上动态呈现标记的图片有关。

我尝试导入图像源，对其进行预加载，需要它，并对图像源参数使用{{uri：url}}格式。一切都会导致应用崩溃，而不会显示错误消息。我想念什么吗？有什么办法让我得到任何可以帮助调试此错误消息的错误消息？如果这是已知问题，是否有解决方法？

MapView：

<MapView
    style={styles.map}
    ref={(map) => { currentMap = map; }}
    region={region}
    onRegionChangeComplete={onRegionChange}
    rotateEnabled={false}
    loadingEnabled
  >
    {
      eventList.map((marker,index) => {
        const { location } = marker.location.geometry;
        if (
          location.lat <= (region.latitude + region.latitudeDelta / 2)
          && location.lat >= (region.latitude - region.latitudeDelta / 2)
          && location.lng <= (region.longitude + region.longitudeDelta / 2)
          && location.lng >= (region.longitude - region.longitudeDelta / 2)
        ) {
          return (
            <MapMarker
              key={index}
              mapMarker={marker}
              handlePress={() => moveMapToCoordinate(marker.location)}
              onSelectEvent={onSelectEvent}
            />
          );
        }
        return null;
      })
    }
  </MapView>

MapMarker：

<Marker
    coordinate={latLng}
    title={title}
    onPress={() => handlePress()}
  >
    <CustomMapMarker
      eventType={eventType}
      isSanctioned={isSanctioned}
      startDate={startAt}
    />
    <Callout
      style={styles.customCallout}
      onPress={() => onSelectEvent(_id)}
    >
      <ViewEventScreenDetailsHeader
        fullEvent={mapMarker}
        containerStyle={styles.calloutDetails} />
    </Callout>
  </Marker>

CustomMapMarker：

const img = require('../../assets/icons/SpikeScreen/map-marker-pickup.png');
return (
  <View style={[styles.pickupMarkerContainer,markerContainerStyle]}>
    <Image
      style={[styles.pickupMarker,markerStyle]}
      source={img}
    />
    <Text style={styles.dayMonthMarkerText}>{formattedStartDate}</Text>
  </View>
)

解决方法

知道了！确保您的标记图标图像不会太大，Apple地图与Google地图的呈现方式有所不同。