volga-volga / react-native-yamap

React Native Yandex Maps | Яндекс Карты | Yandex.MapKit implementation for react native | YandexMaps
144 stars 80 forks source link

Не рендерятся иконки маркеров и позиции пользователя при локальном импорте (Android) #246

Open messenja opened 1 year ago

messenja commented 1 year ago
const LOCATION = require('./location.png');
const USER = require('./user.png');

<YaMap
        ref={mapRef}
        rotateGesturesEnabled={false}
        userLocationIcon={USER}
        showUserPosition
        style={styles.container}>
        {items.length > 0 && items.map( item =>
          <Marker
            key={item.Id}
            scale={2}
            source={LOCATION}
            point={{lat: item.CoordX, lon: item .CoordY}}
            onPress={()=>onMarkerPress(item.CoordX, item.CoordY, item.Id)}
          />
        )}
      </YaMap>

Иногда они рендерятся, иногда нет (синие точки). Бывает еще, что иконка USER пропадает. Закономерности не выявил.

NenadoPL1Z commented 1 year ago

Проблема возникает из-за некорректно первого рендера на android. На ios все нормально. Снизу пример исправления.

const YMap = ({ lat = 0, lon = 0 }) => {

  const [isVisible, setIsVisible] = useState<boolean>(false);

  useEffect(() => {
    setIsVisible(true);
  }, []);

  return (
    <View style={styles.container}>
      <YaMap
        initialRegion={{
          lat,
          lon,
          zoom: 16,
        }}>
        <Marker
          point={{ lat, lon }}
          source={require("@app/assets/images/LandmarkIcon.png")}
          scale={1.5}
          visible={isVisible}
        />
      </YaMap>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});
mexantco commented 7 months ago

Проблема возникает из-за некорректно первого рендера на android. На ios все нормально. Снизу пример исправления.

const YMap = ({ lat = 0, lon = 0 }) => {

  const [isVisible, setIsVisible] = useState<boolean>(false);

  useEffect(() => {
    setIsVisible(true);
  }, []);

  return (
    <View style={styles.container}>
      <YaMap
        initialRegion={{
          lat,
          lon,
          zoom: 16,
        }}>
        <Marker
          point={{ lat, lon }}
          source={require("@app/assets/images/LandmarkIcon.png")}
          scale={1.5}
          visible={isVisible}
        />
      </YaMap>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

У меня все равно 1 из 10 раз не прорисовываются( но раньше вообще не рендерились. спасибо. Глючная либа

messenja commented 6 months ago

У меня все равно 1 из 10 раз не прорисовываются( но раньше вообще не рендерились. спасибо. Глючная либа

Так же. Мне помогло изменить isVisible в onMapLoaded, а не в useEffect'e при монтировании