Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Проблема с отображением <Image /> в children у маркера #289

Open
MinskLeo opened this issue Jul 9, 2024 · 2 comments

Comments

@MinskLeo
Copy link

MinskLeo commented Jul 9, 2024

Привет! На связи небольшой начинающий стартапчик для помощи животным. Сейчас занимаемся написанием основного функционала системы, построенного вокруг Яндекс карт - ваш SDK крайне важная часть приложений. Без фикса этого бага идея под угрозой, так как требуются хорошо поддерживаемые в СНГ карты... А из вариантов только Яндекс...

Описание

Проблема с отображением <Image /> в children у маркера, как на IOS так и на Android. Проблемы как с родным Image из react-native пакета, так и из пакета react-native-fast-image. По сути сам контейнер изображения отрисовывается (граница контейнера, закругление), но само изображение не отображается. Ниже прикреплю изображение.

Изучил все Github Issues что есть тут, нашел несколько похожих проблем, но решений там не обнаружил...

Отдаленно похожие проблемы:

Окружение

{
   "react-native-yamap": "^4.6.0", (
   "react-native": "0.74.2",
   "react": "18.2.0",
}

IOS и Android симуляторы (IOS 17.4 и Android 14), личные девайсы так же имеют проблему. Отпишу точные модели устройств и ОС если будет нужно, но сомневаюсь что баг специфический для определенных устройств.

Пример кода:

Представляю пример части компонента, который отрисовывает маркеры на карте:

import {Image} from 'react-native';

// ...

const CustomMarker = () => {
  // ...
   return (
      <Marker point={{lat: latitude, lon: longitude}}>
        {pictureUri ? (
          <Image
            style={{
              width: 50,
              borderRadius: 1000,
              height: 50,
              borderWidth: 1,
              borderColor: '#000',
            }}
            source={{
              uri: 'http://.../img/image.png',
              headers: {
                Authorization: '...'
              },
            }}
          />
        ) : undefined}
      </Marker>
   );
};

Скриншот

image

Если что то еще для диагностики будет нужно - предоставлю!

@MinskLeo
Copy link
Author

@sirotkin-vvdev @ownikss ребята, гляньте пж, как будет время. Я попробовал сделать фикс самостоятельно, разобраться с нативной стороны, но знаний не хватило...

@ownikss
Copy link
Contributor

ownikss commented Oct 7, 2024

children для маркеров deprecated в библиотеке. Мы добавляли его с целью соответствовать react-native-maps, но yandex mapkit значительно отличается идеологически, поэтому не можем качественно поддерживать эту функциональность.

Если правильно помню, в качестве костыля можно использовать onLoadEnd у компонента Image и пересоздать маркер через key.

Суть текущей реализации в том, что для маркера берется "скриншот" текущего состояния и загружается как изображение в маркер. Если в момент "скриншота" изображение еще не загружено, то используется пустой контент.

Сразу подсвечу, что подобная реализация может тормозить на большом количестве маркеров из-за отрисовки разных маркеров (даже если каждый маркер использует одну и ту же картинку)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants