Я пытаюсь визуализировать собственный маркер в Android и iOS, используя библиотеку react-native-maps, где количество маркеров может варьироваться от 16 до 900.
Где я застрял?
Когда количество маркеров увеличивается (>60) или увеличивается размер маркера, некоторые маркеры не отображаются полностью в iOS. Однако, если пользователь нажимает на эту область, маркер отображается и становится видимым.
Однако в Android это работает нормально, поэтому я предполагаю, что в iOS есть некоторая проблема с рендерингом.
p>
Как выглядит проблема?
[img]https:// i.sstatic.net/808WS.png[/img]
Формат маркеров:
Код: Выделить всё
markers = {
["key": 0, "latitude": 34.123, "longitude": 134.123],
["key": 1, "latitude": 35.123, "longitude": 135.123],
["key": 2, "latitude": 36.123, "longitude": 136.123],
[],
[]
}
Примечание. Маркеры извлекаются через API и сохраняются. в штате
Код: Выделить всё
import React from 'react';
import MapView, {PROVIDER_GOOGLE} from 'react-native-maps';
class CustomMap extends React.Component {
constructor(props) {
super(props);
this.state = {
markers: [],
region: {
latitude: 34.334653,
longitude: 134.365288,
latitudeDelta: 0.45,
longitudeDelta: 0.45,
},
};
}
render() {
const {
region,
markers,
} = this.state;
return (
(this.map = ref)}>
{markers &&
markers.map((marker, index) => (
))}
);
}
}
}
Код: Выделить всё
import React, {useState} from 'react';
import {Marker} from 'react-native-maps';
const CustomMarker = ({marker}) => {
const [tracksViewChanges, setTracksViewChanges] = useState(true);
return (
;
);
};
const getIcon = marker => {
switch (marker?.id) {
case a:
return require('Assets/Images/img1/a.png');
case b:
return require('Assets/Images/img2/b.png');
case c:
return require('Assets/Images/img3/c.png');
default:
}
};
- Пытался использовать значок и реквизит изображения Маркерный компонент библиотеки React-native-maps, но проблема осталась той же после того, как количество маркеров увеличилось с 700.
- Использовалось изображение svg вместо изображения из библиотеки React-native.
- При использовании маркера по умолчанию маркеры отображаются правильно как в iOS, так и в Android.
- Использована ссылка в компоненте маркера, чтобы установить для TrackViewChange значение false. Ссылка
Подробнее здесь: https://stackoverflow.com/questions/756 ... -render-co
Мобильная версия