react-native-maps:animateToRegion 不适用于区域或 initialRegion?
react-native-maps: animateToRegion does not work with region or initialRegion?
简而言之:为什么 animateToRegion 不适用于 region 或 initialRegion?
我已经测试了这个行为并注意到 animateToRegion 在 useEffect() => {}, []);
中使用时也不起作用
但是,如果我向 animateToRegion 添加一个带有功能的简单按钮,那么带有区域或 initialRegion 的 animateToRegion 将起作用。如果我在 MapView.
上设置 animateToRegion onPress/onLongPress,它也会起作用
下面的代码差不多就是MapView的用法了。 fitToMarker() 基本上从用户或默认位置获取位置,然后将它们传递给 animateToRegionHolder()。
const mapRef = React.useRef<MapView | null>(null);
const animateToRegionHolder = (lat: number, lng: number) => {
if (mapRef.current) {
mapRef.current.animateToRegion(
{
latitude: lat,
longitude: lng,
latitudeDelta: 0.2,
longitudeDelta: 0.0421,
},
1000,
);
}
};
<MapView
ref={mapRef}
onMapReady={fitToMarker}
style={[S.MapsStyles.mapView, defineMapContainerStyle()]}
/**
* This for some reason affects that fitToMarker will not work
* But removing this will affect slight animation (which is not desired) on initial render
* initialRegion={O.region}
*/
>
<MapView>
"世博会": "^43.0.0",
“react-native-maps”:“0.28.0”,
为读者提供的解决方案
出现问题是因为将 onMapReady
与 initialRegion
一起使用。有条件地使用onRegionChangeComplete
解决了:
当需要拖动地图时不使用,但当需要初始animateToRegion
时使用。
请尝试使用 useRef
。这是一个工作示例:
const mapRef = React.useRef<MapView >(null);
<MapView
ref={mapRef}
initialRegion={initialRegion}
onRegionChangeComplete={handleRegionChange}
/>
mapRef.current?.animateToRegion({
latitude: selectedCoordinates.lat,
longitude: selectedCoordinates.lng,
longitudeDelta: 0.004,
latitudeDelta: 0,
});
简而言之:为什么 animateToRegion 不适用于 region 或 initialRegion?
我已经测试了这个行为并注意到 animateToRegion 在 useEffect() => {}, []);
中使用时也不起作用
但是,如果我向 animateToRegion 添加一个带有功能的简单按钮,那么带有区域或 initialRegion 的 animateToRegion 将起作用。如果我在 MapView.
下面的代码差不多就是MapView的用法了。 fitToMarker() 基本上从用户或默认位置获取位置,然后将它们传递给 animateToRegionHolder()。
const mapRef = React.useRef<MapView | null>(null);
const animateToRegionHolder = (lat: number, lng: number) => {
if (mapRef.current) {
mapRef.current.animateToRegion(
{
latitude: lat,
longitude: lng,
latitudeDelta: 0.2,
longitudeDelta: 0.0421,
},
1000,
);
}
};
<MapView
ref={mapRef}
onMapReady={fitToMarker}
style={[S.MapsStyles.mapView, defineMapContainerStyle()]}
/**
* This for some reason affects that fitToMarker will not work
* But removing this will affect slight animation (which is not desired) on initial render
* initialRegion={O.region}
*/
>
<MapView>
"世博会": "^43.0.0",
“react-native-maps”:“0.28.0”,
为读者提供的解决方案
出现问题是因为将 onMapReady
与 initialRegion
一起使用。有条件地使用onRegionChangeComplete
解决了:
当需要拖动地图时不使用,但当需要初始animateToRegion
时使用。
请尝试使用 useRef
。这是一个工作示例:
const mapRef = React.useRef<MapView >(null);
<MapView
ref={mapRef}
initialRegion={initialRegion}
onRegionChangeComplete={handleRegionChange}
/>
mapRef.current?.animateToRegion({
latitude: selectedCoordinates.lat,
longitude: selectedCoordinates.lng,
longitudeDelta: 0.004,
latitudeDelta: 0,
});