volga-volga / react-native-yamap

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

карта не всегда отображается с необходимым размером (Height) на ios #269

Open anis-18 opened 7 months ago

anis-18 commented 7 months ago

карта не всегда отображается с необходимым размером на ios. даже если size указана в собственных стилях эта ошибка встречается только в ios. Чтобы узнать больше об ошибке, посмотрите видео.

это мой код

import React from 'react';
import { Dimensions, View } from 'react-native';
import { NATIVE_STYLE } from 'features/yandex-map/native-yandex-map-styles';
import { useAppSelector } from 'hooks/redux-hooks';
import YaMap from 'react-native-yamap';

const deviceWidth = Dimensions.get('window').width;
const deviceHeight = Dimensions.get('window').height;

interface Props<T> {
  scrollGesturesEnabled?: boolean;
  mapHeight?: number;
  mapWidth?: number;
  onPress: () => void;
  markers?: T[]; // Array of markers of any type
  renderMarker: (marker: T, index: number) => React.ReactNode;
}

export function MapView(props: Props<any>) {
  const { userPosition } = useAppSelector(state => state.appState);
  const yandexMapRef = React.useRef<YaMap>(null);
  const [zoom, setZoom] = React.useState<number>(10);

  React.useEffect(() => {
    if (props.markers) {
      yandexMapRef?.current?.fitAllMarkers();
    }
  }, [props.markers, userPosition]);

  return (
    <View style={{ height: 200, width: deviceWidth }}>
      <YaMap
        scrollGesturesEnabled={props.scrollGesturesEnabled}
        logoPosition={{ horizontal: 'right', vertical: 'bottom' }}
        style={{ flex: 1 }}
        ref={yandexMapRef}
        showUserPosition
        followUser
        userLocationAccuracyFillColor="rgba(202, 215, 249, 0.5)"
        onCameraPositionChangeEnd={e => setZoom(e.nativeEvent.zoom)}
        mapStyle={NATIVE_STYLE}
        userLocationIcon={require('../../assets/yandex-map/user-location-image.png')}
        initialRegion={{
          lat: userPosition?.lat ?? 55.79880694983767,
          lon: userPosition?.lon ?? 49.11185043089338,
          zoom: 10,
          azimuth: 0,
          tilt: 0,
        }}>
        {props.markers?.map((marker, index) =>
          props.renderMarker(marker, index),
        )}
      </YaMap>
    </View>
  );
}

the native style

export const NATIVE_STYLE = JSON.stringify([
  {
    types: ['point'],
    tags: { all: ['transit'] },
    stylers: {
      visibility: 'off',
    },
  },
]);

https://github.com/volga-volga/react-native-yamap/assets/36996198/ea37aa70-defa-4c47-8362-6bc6e7e85c64

Abdumaliks commented 6 months ago

Столкнулся точно таким же проблемой на платформе IOS, есть ли у кого-то идеи по поводу решения проблемы?

Critically commented 3 months ago

Есть кто победил ?