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

问题描述

我正在开发一个 Expo React Native 项目，该项目使用 react-native-maps 来呈现带有标记列表的 MapView 组件。标记是呈现图像的自定义组件。使用 Android 和 Google 地图进行测试时，一切正常。使用 iOS 模拟器进行测试时，会出现标记，但地图运行缓慢。使用物理 iPhone 7（和其他）进行测试时，应用程序崩溃且没有错误消息。应用程序始终正确加载，直到渲染地图，在应用程序崩溃之前显示一两秒钟。有时标记也会在应用程序崩溃之前出现一瞬间。

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

我尝试过导入图像源、预加载它、要求它，并使用 {{uri:url}} 格式作为图像源参数。一切都会导致应用程序崩溃而没有错误消息。我错过了什么吗？有什么方法可以让我得到任何可以帮助调试的错误消息吗？如果这是一个已知问题，是否有解决方法？

地图视图：

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

地图标记：

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

自定义地图标记：

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

标签： iosreact-nativeexporeact-native-mapsapple-maps

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

问题描述

解决方案

推荐阅读