离子5反应背景地理定位

Question

我正试图用后台地理定位插件开发用于Android / iOS的Ionic React应用程序：

https://ionicframework.com/docs/native/background-geolocation

我正在跟踪文档，并安装了：

npm install @mauron85/cordova-plugin-background-geolocation
npm install @ionic-native/background-geolocation

当我编译代码时，我做了一个错误：

编译失败。

.\node_modules@ionic-native\background-geolocation\ngx\index.js找不到模块：@角形/核心。请确保已安装此软件包。

您可以通过运行: npm install @角/core来安装这个包。

错误运行子进程反应脚本时发生错误。

使用退出代码1退出的脚本. code构建。使用--详细标志重新运行此命令可能会提供更多信息。

因此，我还安装了@角/核心(不知道为什么，因为我使用的是React，但不管是什么)。

在文件中写着：

BackgroundGeolocation必须在app.ts中或在地理定位之前调用。否则，平台将不会要求您的背景跟踪许可。

因此，我打开了App.tsx并启动了复制和粘贴代码：

import React, { Component } from "react";
import { Redirect, Route } from "react-router-dom";
import { IonApp, IonRouterOutlet } from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";
import GPS from "./pages/GPS";

import {
  BackgroundGeolocation,
  BackgroundGeolocationConfig,
  BackgroundGeolocationEvents,
  BackgroundGeolocationResponse,
} from "@ionic-native/background-geolocation/ngx";

/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";

/* Theme variables */
import "./theme/variables.css";

class App extends Component {
  constructor(
    props: any,
    private backgroundGeolocation: BackgroundGeolocation
  ) {
    super(props);

    const config: BackgroundGeolocationConfig = {
      desiredAccuracy: 10,
      stationaryRadius: 20,
      distanceFilter: 30,
      debug: true, //  enable this hear sounds for background-geolocation life-cycle.
      stopOnTerminate: false, // enable this to clear background location settings when the app terminates
    };

    this.backgroundGeolocation.configure(config).then(() => {
      this.backgroundGeolocation
        .on(BackgroundGeolocationEvents.location)
        .subscribe((location: BackgroundGeolocationResponse) => {
          console.log(location);

          // IMPORTANT:  You must execute the finish method here to inform the native plugin that you're finished,
          // and the background-task may be completed.  You must do this regardless if your operations are successful or not.
          // IF YOU DON'T, ios will CRASH YOUR APP for spending too much time in the background.
          this.backgroundGeolocation.finish(); // FOR IOS ONLY
        });
    });
  }

  render() {

    return (
      <IonApp>
        <IonReactRouter>
          <IonRouterOutlet>
            <Route
              path="/gps"
              component={GPS}
              exact={true}
            />
            <Route exact path="/" render={() => <Redirect to="/gps" />} />
          </IonRouterOutlet>
        </IonReactRouter>
      </IonApp>
    );
  }
}

export default App;

当我保存文件并构建项目时，我会得到以下错误：

[react-scripts] F:/hybrid-app-development/job/sportis/gps-tracking/src/App.tsx
[react-scripts] TypeScript error in F:/hybrid-app-development/job/sportis/gps-tracking/src/App.tsx(48,32):
[react-scripts] Property 'configure' does not exist on type 'BackgroundGeolocation'.  TS2339
[react-scripts]     46 |     };
[react-scripts]     47 | 
[react-scripts]   > 48 |     this.backgroundGeolocation.configure(config).then(() => {
[react-scripts]        |                                ^
[react-scripts]     49 |       this.backgroundGeolocation
[react-scripts]     50 |         .on(BackgroundGeolocationEvents.location)
[react-scripts]     51 |         .subscribe((location: BackgroundGeolocationResponse) => {

下面是一个依赖项列表，希望所有内容都是如何安装的：

"dependencies": {
    "@angular/core": "^11.0.7",
    "@capacitor/android": "^2.4.5",
    "@capacitor/core": "2.4.5",
    "@ionic-native/android-permissions": "^5.30.0",
    "@ionic-native/background-geolocation": "^5.30.0",
    "@ionic-native/core": "^5.30.0",
    "@ionic-native/location-accuracy": "^5.30.0",
    "@ionic/react": "^5.0.7",
    "@ionic/react-router": "^5.0.7",
    "@mauron85/cordova-plugin-background-geolocation": "^3.1.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^8.0.3",
    "@types/jest": "^24.0.25",
    "@types/node": "^12.12.24",
    "@types/react": "^16.9.17",
    "@types/react-dom": "^16.9.4",
    "@types/react-router": "^5.1.4",
    "@types/react-router-dom": "^5.1.3",
    "cordova-plugin-android-permissions": "^1.1.2",
    "cordova-plugin-mauron85-background-geolocation": "^2.2.5",
    "cordova-plugin-request-location-accuracy": "^2.3.0",
    "ionicons": "^5.0.0",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.4.4",
    "react-useinterval": "^1.0.2",
    "typescript": "3.8.3"
  },

知道是怎么回事吗？非常感谢!

Answer 1

如果您使用React，您的导入就不能有@ionic-native/background-geolocation/ngx

.../ngx只是角的。所以只需在没有。

import {
  BackgroundGeolocation,
    BackgroundGeolocationConfig,
    BackgroundGeolocationResponse,
    BackgroundGeolocationEvents,
} from "@ionic-native/background-geolocation

似乎你还读了那个插件的角文档。

另一个细节是，你没有通知你是否使用电容器，如果是，你必须：

npm install @mauron85/cordova-plugin-background-geolocation
npm install @ionic-native/background-geolocation
npx cap sync