volga-volga / react-native-yamap

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

iOS: позиция карты отображается неверно относительно координат в initialRegion #223

Open anagovitsyn opened 1 year ago

anagovitsyn commented 1 year ago

При запуске приложения карта рандомно отображается с позицией initialRegion либо в центре, либо в правом нижнем углу. На видео из 10 запусков, 6 раз карта отобразилась верно (с указанными координатами initialRegion в центре), и 4 раза неверно (позиция initialRegion в правом нижнем углу). На андроиде этот же код отрабатывает стабильно без ошибок. Баг проявляется на любом iOS устройстве и симуляторе. В тех случаях, когда карта отобразилась неверно, mapRef.setCenter(...) так же устанавливает видимую область карты в неверное положение, при котором координаты, переданные в setCenter() оказываются в правом нижнем углу вьюпорта карты.

https://user-images.githubusercontent.com/55987916/209692455-337d96b5-d692-43f5-a065-ce176a98276a.mp4

macOS: Monterey (12.1) M1 device: iPhone 11 react-native: 0.64.3 react-native-yamap: 4.1.14

                <YaMap
                    ref={yamapRef}
                    style={styles.map}
                    nightMode
                    onMapPress={() => {
                        hideRedundant();
                        Keyboard.dismiss();
                    }}
                    onMoveShouldSetResponderCapture={() => {
                        Keyboard.dismiss();
                        return true;
                    }}
                    // userLocationIcon={{
                    //     uri: 'https://www.clipartmax.com/png/middle/180-1801760_pin-png.png',
                    // }}
                    initialRegion={{
                        lat: MAP_INITIAL_REGION.latitude,
                        lon: MAP_INITIAL_REGION.longitude,
                        zoom: 11,
                        azimuth: 0,
                        tilt: 0,
                    }}
                    onCameraPositionChange={hideRedundant}
                    onCameraPositionChangeEnd={() => {
                        setMarkerPressed(false);
                    }}
                    //   userLocationIcon={USER}
                    showUserPosition={false}
                    // onMapPress={hideRedundant}
                    //   nightMode={this.state.night}
                    //   onMapLongPress={this.onMapLongPress}
                >
                    {filteredList.map((gym: Gym, index: number) => {
                        return (
                            <YaMarker
                                key={gym._id + index}
                                id={gym._id}
                                latLng={parseGeoJSONPointToGoogleLatLng(
                                    gym.location
                                )}
                                perMinGym={
                                    gym?.hasPerMinWorkouts &&
                                    gym?.authorized
                                }
                                onMarkerPress={onMarkerPress}
                                authorized={gym.authorized}
                                price={
                                    gym?.hasSingleWorkouts ||
                                    gym?.hasPerMinWorkouts
                                        ? new PriceHelpers(
                                              gym
                                          ).calculatePrice()
                                        : null
                                }
                            />
                        );
                    })}
                </YaMap>
anagovitsyn commented 1 year ago

На приложенном видео видно проблему с масштабом: масштаб карты через раз показывается с разным значением, такое ощущение что поле zoom: в параметрах initialRegion и setCenter() периодически не учитывается.

ViacheslavDyachenko commented 4 months ago

@anagovitsyn получилось разобраться в чём проблема и как решить? Сталкиваюсь с этой же проблемой

ViacheslavDyachenko commented 4 months ago

проблему удалось решить, добавив обёртку вокруг компонента YaMap и передав onLayout={() => setInit(true)}, и добавив условный рендеринг карт по состоянию init

<RN.View onLayout={() => setInit(true)}> {init && ( <YaMap ... )} </RN.View>

anagovitsyn commented 4 months ago

Проблему удалось решить, но не помню как. Если не удастся решить вам поищу у себя коммит с решением.

VasiliLysenkou commented 2 months ago

@anagovitsyn есть возможность поискать решение?