React本机地图标记动画不会在发布时发射
我正在使用一个实时跟踪应用程序使用 反应原始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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
https://github.com/reaect-native-maps/反应映射/问题/4371
此问题可能会帮助您
react> react-native-maps
正在使用React> React-native
的动画,而不是平稳的代码>反应本地加固的V2https://github.com/react-native-maps/react-native-maps/issues/4371
this issue might help you
react-native-maps
are using Animated ofreact-native
not smooth asreact-native-reanimated v2