React本机地图标记动画不会在发布时发射

发布于 2025-02-12 03:20:19 字数 2930 浏览 2 评论 0原文

我正在使用一个实时跟踪应用程序使用 反应原始0.65.1 反应映射0.31.1 React-Native-geopocation-service 5.3.0-beta.1

一切在调试模式下一切都很好。当用户位置更改时,地图将动画并遵循用户移动,并且自定义标记将顺利移动到用户位置。

但是发布后,应用于跟踪器标记的AnimAtemarkerTocoortion方法不起作用。地图移动,但标记不移动。

        Geolocation.watchPosition(
            (position) => {
                let currentLocation = {
                    longitude: position.coords.longitude,
                    latitude: position.coords.latitude,
                    heading: position.coords.heading,
                };
                if (mapViewRef.current)
                    mapViewRef.current.animateCamera(
                        {
                            center: currentLocation,
                        },
                        {
                            duration: 200,
                        }
                    );

                if (trackerMarkerRef.current) {
            
                  if (Platform.OS == "android") {
                        trackerMarkerRef.current.animateMarkerToCoordinate(position, 200);
                  } else {
                    let newCoordinate = {
                      ...position,
                      useNativeDriver: true,
                      };
                    animtedRegion.timing({ ...newCoordinate, useNativeDriver: true, duration: 200 }).start();
                  }
                }
            },
            (error) => console.log(error),
            {
                showLocationDialog: true,
                enableHighAccuracy: true,
                accuracy: {
                    android: "high",
                    ios: "bestForNavigation",
                },
                fastestInterval: 100,
                distanceFilter: 0.01,
                interval: 100,
            }
        );
<MapView
       style={styles.map}
       provider={PROVIDER_GOOGLE}
       showsUserLocation={true}
       ref={mapViewRef}
       initialRegion={{
         latitude: locationRef.current.latitude,
         longitude: locationRef.current.longitude,
         latitudeDelta: latitudeDelta,
         longitudeDelta: longitudeDelta,
      }}
>
 

         {locationTrackerRef.current && (
           <Marker.Animated
             coordinate={{
              latitude: locationTrackerRef.current.latitude,
              longitude: locationTrackerRef.current.longitude,
             }}
            anchor={{ x: 0.5, y: 0.5 }}
            ref={trackerMarkerRef}
          >
           <Animated.View style={{ transform: [{ rotate: rotation }] }}>
            <Image
             source={require("../images/pins.png")}
              style={{
                height: 30,
                width: undefined,
                resizeMode: "contain",
                aspectRatio: 1,
              }}
           />
     </Animated.View>
</Marker.Animated>
)}

</MapView>

I'm working on a real-time tracking app using
react-native 0.65.1
react-native-maps 0.31.1
react-native-geolocation-service 5.3.0-beta.1

Everything works well on debug mode. When user location changes, the map is animated and follows the user movement, and the custom marker is smoothly moved to the user location.

But on release, the animateMarkerToCoordinate method applied to the tracker marker does not work. The map moves but the marker does not.

        Geolocation.watchPosition(
            (position) => {
                let currentLocation = {
                    longitude: position.coords.longitude,
                    latitude: position.coords.latitude,
                    heading: position.coords.heading,
                };
                if (mapViewRef.current)
                    mapViewRef.current.animateCamera(
                        {
                            center: currentLocation,
                        },
                        {
                            duration: 200,
                        }
                    );

                if (trackerMarkerRef.current) {
            
                  if (Platform.OS == "android") {
                        trackerMarkerRef.current.animateMarkerToCoordinate(position, 200);
                  } else {
                    let newCoordinate = {
                      ...position,
                      useNativeDriver: true,
                      };
                    animtedRegion.timing({ ...newCoordinate, useNativeDriver: true, duration: 200 }).start();
                  }
                }
            },
            (error) => console.log(error),
            {
                showLocationDialog: true,
                enableHighAccuracy: true,
                accuracy: {
                    android: "high",
                    ios: "bestForNavigation",
                },
                fastestInterval: 100,
                distanceFilter: 0.01,
                interval: 100,
            }
        );
<MapView
       style={styles.map}
       provider={PROVIDER_GOOGLE}
       showsUserLocation={true}
       ref={mapViewRef}
       initialRegion={{
         latitude: locationRef.current.latitude,
         longitude: locationRef.current.longitude,
         latitudeDelta: latitudeDelta,
         longitudeDelta: longitudeDelta,
      }}
>
 

         {locationTrackerRef.current && (
           <Marker.Animated
             coordinate={{
              latitude: locationTrackerRef.current.latitude,
              longitude: locationTrackerRef.current.longitude,
             }}
            anchor={{ x: 0.5, y: 0.5 }}
            ref={trackerMarkerRef}
          >
           <Animated.View style={{ transform: [{ rotate: rotation }] }}>
            <Image
             source={require("../images/pins.png")}
              style={{
                height: 30,
                width: undefined,
                resizeMode: "contain",
                aspectRatio: 1,
              }}
           />
     </Animated.View>
</Marker.Animated>
)}

</MapView>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

抹茶夏天i‖ 2025-02-19 03:20:19

https://github.com/reaect-native-maps/反应映射/问题/4371
此问题可能会帮助您

  • 您可以在proguard中使用规则或使用标记上的复兴而不是refmarker,因为react> react-native-maps正在使用React> React-native的动画,而不是平稳的代码>反应本地加固的V2

https://github.com/react-native-maps/react-native-maps/issues/4371
this issue might help you

  • you can use rule in proguard or use reanimated on marker instead of refMarker because react-native-maps are using Animated of react-native not smooth as react-native-reanimated v2
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文