动态更改 animateCamera 俯仰和缩放属性不起作用

Question

使用 useState 动态更改 animateCamera 俯仰和缩放属性不起作用

                onLayout={() => {
                    map.current.animateCamera({
                        center: { latitude: location?.coords?.latitude, longitude: location?.coords?.longitude },
                        zoom: zoomLevel,
                        heading: 50,
                        pitch: pitchLevel,
                        altitude: 5,
                    })
                }}

我发现 onlayout 不太适合转换。

So here's all of the undocumented or buggy behavior I've encountered with onLayout and .measure so far:

onLayout doesn't get called in some conditions (seemingly when an element is moved by a parent resizing)
the measure returns undefined on android unless there's an onLayout or collapsible: false on the view
onLayout doesn't take transforms into account, it returns the "internal" size of the view not the size displayed on the screen
onLayout doesn't fire for animations of transforms (which is pretty much all animations since only transforms and opacity can use native driver) -- that's this issue
measure returns different values for width and height than onLayout. It returns scaled values if any parent is scaled as opposed to the raw values. Docs suggest the opposite.
onLayout Will return wrong/random values during component mount in some (maybe all?) cases if the view or any parent is being animated.

It's because layout process is not involved in transformations at all. Actually Animated can't change any properties that can change layout of the component tree.

我找到了这种方法https://reactnative.dev/docs/direct-manipulation 如果我找到解决方案，我会给出一个片段

Answer 1

我认为您应该使用钩子 (useEffect) 将 Map 动画化到该区域。在我的例子中，我从 GoogleAutoPlaces 获得了新的位置 api。我在坐标变量中接收 latlng 对象。给你可以添加坐标变量作为依赖项以及您的位置会改变它会自动将地图动画到新的位置。 useEffect(() => { mapref?.current?.animateToRegion(coordinate, 1000); }, [coordinate]);

Answer 2

解决方案是：

ref={(current) => (map.current = current)}
          onUserLocationChange={() => {
            map.current.animateCamera({
              center: {
                latitude: locationUpdate?.coords?.latitude,
                longitude: locationUpdate?.coords?.longitude,
              },
              zoom: 16,
              heading: Math.round(headingRef.current),
              pitch: 90,
              altitude: Math.round(altitudeRef.current),
              useNativeDriver: true,
            });
          }}

尽管为了增强本机反应性能，您可以在 useCallback 挂钩中设置它并从中调用它：

onUserLocationChange={animateCameraUseCallback}

动态更改 animateCamera 俯仰和缩放属性不起作用

Changing animateCamera pitch and zoom properties dynamically doesn't work

reactjs

react-native

react-native-maps