为什么在渲染四个地图标记后使用自定义地图标记、Expo和Apple maps时，react原生地图MapView会崩溃

Question

我正在进行一个Expo React Native项目，该项目使用React Native地图来渲染带有标记列表的MapView组件。标记是渲染图像的自定义组件。当使用Android和谷歌地图进行测试时，一切都很完美。使用iOS模拟器进行测试时，会显示标记，但地图运行缓慢。当使用物理iPhone 7(和其他(进行测试时，应用程序崩溃，没有错误消息。在渲染地图之前，应用程序始终正确加载，地图会在应用程序崩溃前出现一两秒钟。有时，在应用程序崩溃之前，标记还会出现一瞬间。

如果我设置了渲染项目数量的限制，只要限制小于五个，标记就会出现。类似地，如果我指定按id加载哪个标记，我可以呈现每个标记，这样我就不会认为数据是错误的或导致未处理的异常。我需要列表中的所有项目都进行动态渲染，不限制可以渲染的数量。如果我注释掉图像组件，则默认的红色pin标记将出现在地图上，而不会出现任何问题。这个问题似乎与如何在苹果地图上动态渲染标记的图像有关。

我已经尝试过导入图像源，预加载它，需要它，并使用｛｛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>
)

Answer 1

找到他们了！确保你的标记图标图像不是太大，苹果地图的渲染方式与谷歌地图不同。