无法使用反应挂钩更新地图中的折线

Posted 2023-02-16

【中文标题】无法使用反应挂钩更新地图中的折线

【英文标题】：Cant able to update the polyline in the map using react hooks

【发布时间】：2022-01-16 05:34:39

【问题描述】：

请在这里帮助我我正在尝试根据用户跟踪更新折线，但折线没有更新，我正在使用我尝试过不同方式但无法正常工作的功能组件。请帮帮我下面是我写的代码

地图组件

<MapView
            provider=PROVIDER_GOOGLE
            style=flex: 1, borderRadius: 20
            showsUserLocation=true
            userLocationPriority='high'
            userLocationFastestInterval=2000
            initialRegion=
                latitude: originLat,
                longitude: originLng,
                latitudeDelta: 0.01,
                longitudeDelta: 0.01,
            >
            <Marker.Animated
                coordinate=
                    new AnimatedRegion(
                        latitude: originLat,
                        longitude: originLng,
                        latitudeDelta: 0.01,
                        longitudeDelta: 0.01,
                    )
                
                pinColor='#FF8C00'>
                <Image
                    source=Images.marker
                    style=height: 100, width: 100, marginTop: 36
                />
            </Marker.Animated>
            <Polyline
                coordinates=userLocation
                strokeColor=colors.blue
                strokeWidth=3
            />
        </MapView>

观看位置

const watchPosition = () => 
    Geolocation.watchPosition(
        position => 
            const userUpdatedLocation = new Location();
            userUpdatedLocation.latitude = position.coords.latitude;
            userUpdatedLocation.longitude = position.coords.longitude;
            setUserLocationLL(userUpdatedLocation);
        ,
        error => 
            Alert.alert(error.message.toString());
        ,
        
            enableHighAccuracy: true,
            timeout: 100,
            maximumAge: 0,
            distanceFilter: 0,
            useSignificantChanges: true
        ,
    );

下面是我分配的变量

const [userLocation, setUserLocation] = useState<Location[]>([]);
    const [userLocationLL, setUserLocationLL] = useState<Location>(initialLocation);

折线：

   <Polyline
  coordinates=userLocation
  strokeColor=colors.blue
  strokeWidth=3
/>

更新设置状态

useEffect(() => 
  setUserLocation(locations => [...locations, userLocationLL]);
, [userLocationLL]);

【参考方案1】：

您似乎缺少更新 userLocation 状态，该状态将历史位置数据保存在一个数组中以绘制出来。

<Polyline
  coordinates=userLocation // <-- array of locations
  strokeColor=colors.blue
  strokeWidth=3
/>

您可以在watchPosition 处理程序中更新userLocation 数组

const watchPosition = () => 
  Geolocation.watchPosition(
    position => 
      const userUpdatedLocation = new Location();
      userUpdatedLocation.latitude = position.coords.latitude;
      userUpdatedLocation.longitude = position.coords.longitude;
      setUserLocationLL(userUpdatedLocation);

      // Append new position to `userLocation` array
      setUserLocation(locations => [...locations, userUpdatedLocation]);
    ,
    ....
  );

或者您可以使用useEffect 挂钩在userLocationLL 状态更新时更新userLocation 状态。

useEffect(() => 
  setUserLocation(locations => [...locations, userLocationLL]);
, [userLocationLL]);

【讨论】：

我也在这样做@Drew Reese

是的，我试过它不工作

@AyubBaba 你能更具体地说明什么不起作用吗？这是本机代码吗？如果是这样，您是否可以尝试创建一个Expo snack，其中包含我们可以实时检查和调试的最小、可重现的示例？

我也尝试过使用设置状态，但折线没有更新

也更新了问题