React Native 无法使用 React-viro 绘制完整尺寸的路径

Question

我正在 React Native 中使用地图框中的点进行现实世界导航，但我的线路导航轨迹未按全尺寸绘制，并且显示相对于手机的错误方向。对于增强现实，我使用react-viro 库。下面是我的代码。可能是什么原因？

package.json dependencies:
 "dependencies": {
 "@backpackapp-io/react-native-toast": "^0.11.0",
 "@expo/vector-icons": "^14.0.0",
 "@gorhom/bottom-sheet": "^4",
 "@mapbox/mapbox-sdk": "^0.16.0",
 "@react-native-async-storage/async-storage": "1.23.1",
 "@react-native-masked-view/masked-view": "^0.3.1",
 "@react-navigation/native": "^6.0.2",
 "@reactvision/react-viro": "^2.41.6",
 "@rnmapbox/maps": "^10.1.27",
 "expo": "~51.0.20",
 "expo-camera": "^15.0.14",
 "expo-constants": "~16.0.2",
 "expo-dev-client": "~4.0.21",
 "expo-font": "~12.0.8",
 "expo-image-picker": "~15.0.7",
 "expo-linking": "~6.3.1",
 "expo-location": "~17.0.1",
 "expo-router": "~3.5.18",
 "expo-splash-screen": "~0.27.5",
 "expo-status-bar": "~1.12.1",
 "expo-system-ui": "~3.0.7",
 "expo-updates": "~0.25.21",
 "expo-web-browser": "~13.0.3",
 "firebase": "^10.12.2",
 "geolib": "^3.3.4",
 "react": "18.2.0",
 "react-dom": "18.2.0",
 "react-native": "0.74.3",
 "react-native-gesture-handler": "~2.16.1",
 "react-native-keyboard-aware-scroll-view": "^0.9.5",
 "react-native-linear-gradient": "^2.8.3",
 "react-native-reanimated": "~3.10.1",
 "react-native-safe-area-context": "4.10.1",
 "react-native-screens": "3.31.1",
 "react-native-svg": "^15.4.0",
 "react-native-swiper": "^1.6.0",
 "react-native-web": "~0.19.10",
 "expo-sensors": "~13.0.9"
  },
 "devDependencies": {
 "@babel/core": "^7.20.0",
 "@react-native/babel-preset": "0.74.85",
 "@react-native/eslint-config": "0.74.85",
 "@react-native/metro-config": "0.74.85",
 "@react-native/typescript-config": "0.74.85",
 "@types/jest": "^29.5.12",
 "@types/react": "~18.2.45",
 "@types/react-test-renderer": "^18.0.7",
 "jest": "^29.2.1",
 "jest-expo": "~51.0.1",
 "prettier": "3.3.2",
 "react-test-renderer": "18.2.0",
 "typescript": "~5.3.3"
  },


export const ConvertGeolocation = ({
  latitude,
  longitude,
  referenceLat,
  referenceLong,
}: IPropsGeolocation): any => {
  if (
    typeof latitude !== "number" ||
    typeof longitude !== "number" ||
    typeof referenceLat !== "number" ||
    typeof referenceLong !== "number"
  ) {
    console.error("Invalid coordinates provided");
    return [0, 0, 0];
  }

  const distance = getDistance(
    { latitude: referenceLat, longitude: referenceLong },
    { latitude, longitude },
    0.01,
  );

  const bearing = getRhumbLineBearing(
    { latitude: referenceLat, longitude: referenceLong },
    { latitude, longitude },
  );

  const distanceInMeters = convertDistance(distance, "m");

  const scaleFactor = 1;
  const x =
    distanceInMeters * Math.cos(bearing * (Math.PI / 180)) * scaleFactor;
  const z =
    distanceInMeters * Math.sin(bearing * (Math.PI / 180)) * scaleFactor;

  return [x, 0, z];
};

    const ViroPath: FC<PathProps> = ({ path }) => {
      const [routeAr, setRouteAr] = useState([]);
      const [userCurrentLocation, setUserCurrentLocation] = useState<any>(null);
      const { location, isLoading } = useLocation();
      const { heading } = useHeading();

  useEffect(() => {
    const updateUserLocation = async () => {
      if (location && location.coords) {
        setUserCurrentLocation({
          latitude: location.coords.latitude,
          longitude: location.coords.longitude,
         });
      }
    };
    updateUserLocation();
  }, [location, isLoading]);

  const start = path[0];

  const end = path[path.length - 1];

  const getDirections = async (start: any, end: any) => {
    try {
      const url =     `https://api.mapbox.com/directions/v5/mapbox/driving/${start[0]},${start[1]};${end[0]},${end[1]}?         geometries=geojson&access_token=${process.env.EXPO_PUBLIC_MAPBOX_KEY}`;

       const response = await fetch(url);
       if (!response.ok) {
        throw new Error(`Error fetching directions: ${response.statusText}`);
       }

      const data = await response.json();

      const route = data.routes[0].geometry.coordinates;
      return route;
    } catch (error) {
      console.error("Error in getDirections:", error);
      return [];
    }
  };

  useEffect(() => {
    getDirections(start, end)
      .then((route) => {
        setRouteAr(route);
      })
      .catch((error) => {
        console.error("Error:", error);
      });
  }, [start, end]);

  const referenceLat = userCurrentLocation
    ? userCurrentLocation.latitude
    : null;
  const referenceLong = userCurrentLocation
    ? userCurrentLocation.longitude
    : null;

  const convertedRoute = useMemo(() => {
    if (!userCurrentLocation) return [];

    return routeAr.map(([longitude, latitude]: Coordinate) =>
      ConvertGeolocation({
        latitude,
        longitude,
        referenceLat: referenceLat,
        referenceLong: referenceLong,
      }),
    );
  }, [routeAr, userCurrentLocation]);

  if (routeAr.length === 0 || !userCurrentLocation) {
    return null;
  }

  return (
    <ViroARScene key={"scene3"} scale={[1, 1, 1]}>
      <ViroARPlane minHeight={0.1} minWidth={0.1} />
      {convertedRoute.length > 1 && (
        <ViroPolyline
          points={convertedRoute}
          thickness={0.05}
          materials={["blueLine"]}
          position={[0, -35, 0]}
          rotation={[0, heading, 0]}
        />
      )}
    </ViroARScene>
  );
};`

我尝试添加点作为标记并在它们之间建立一条线，同样的事情。我也尝试过更改缩放器，但它根本无法正确显示。

Answer 1

我和你没有完全一样的问题，但我想问你如何让 viroreact 和 expo 一起工作。在 reddit 上我读到它不再受支持，你成功了吗？