Typescript React Native Maps Polyline 跟踪路线如 uber

问题描述

我正在尝试实现一个跟踪路由器应用程序，所以当用户走路时，应用程序会注册它的路径。

我做到了，但有时会奏效，有时却很糟糕。

我需要知道我是否可以优化我的代码，这样被跟踪的路线会流动得更好。

我猜它是 useEffect 将路由存储在我调用的数组中，这会导致应用程序运行缓慢，但我不知道如何在没有 useEffect 的情况下跟踪它，或者找到一个计时器或一些不会锁定应用程序运行的东西不时获取职位。

这是我的代码的一些部分：

位置挂钩：

interface coordenatesProps{
  latitude: number;
  longitude: number;
}

const [points,setPoints] = useState<coordenatesProps[]>([]);
//I am storing the route at that point state,working as array incremented by useState

//then,i got that function: 
const loadPosition = useCallback(async () => {
.
.
.
Geolocation.getCurrentPosition(
          async ({ coords }) => {
            setCoords({
              latitude: coords.latitude,longitude: coords.longitude,});
            setPoints((state) => [...state,coords]);
          },() => {
            Alert.alert('Não foi possível obter a localização');
          },{ enableHighAccuracy: true,timeout: 20000,maximumAge: 1000,showLocationDialog: true }
        );
}

    },[]);

useEffect(() => {
      loadPosition();
},[]);

然后我得到了 polyline 组件，我称之为“路径”：

import {useLocation} from '../../hooks/Location';

const Path: React.FC = () => {
  const {points} = useLocation();
  return (
    <polyline
      coordinates={
        points
      }
      geodesic = {true}
      strokeColor = {'#6F9F77'}
      strokeWidth = {6}
    />
  );
}

export default Path;

最后，我设置了地图视图的 mainPain，并在中间设置了我的组件：

<MapView
 ..props...
>
.
.
.
<Path/>
.
.
.
<MapView/>

我这样做对吗？你们知道更好的方法吗？谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

polyline polyline react-native-maps typescript typescript typescript