Блог

Я работаю над проектом Expo React Native, который использует react-native-maps для рендеринга компонента MapView со списком маркеров. Маркеры — это пользовательские компоненты, которые отображают изображение. При тестировании с использованием Android и Google Maps все работает отлично. При тестировании с использованием эмулятора iOS маркеры появляются, но карта выполняется медленно. При тестировании с использованием физического iPhone 7 (и других) приложение вылетает без сообщения об ошибке. Приложение всегда загружается корректно до рендеринга карты, который появляется за секунду или две до сбоя приложения. Иногда маркеры также появляются за долю секунды до сбоя приложения.

Если я установлю ограничения на количество элементов для рендеринга, маркеры будут отображаться, если ограничение меньше пяти. Аналогично я могу отобразить каждый маркер, если укажу, какой из них загружать по идентификатору, поэтому я не думаю, что данные неверны или вызывают необработанные исключения. Мне нужно, чтобы все элементы в списке отображались динамически, без ограничения количества отображаемых. Если я закомментирую компонент изображения, и красные маркеры по умолчанию появятся на карте без каких-либо проблем. Похоже, проблема связана с тем, как изображения маркеров динамически отображаются на Apple map.

Я попытался импортировать источник изображения, предварительно загрузить его, запросить его и использовать формат {{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)
          amp;amp; location.lat >= (region.latitude - region.latitudeDelta / 2)
          amp;amp; location.lng <= (region.longitude   region.longitudeDelta / 2)
          amp;amp; 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 maps отображает их иначе, чем карты Google.