Ionic 5 React 背景地理定位

Question

我正在尝试使用 Background Geolocation 插件为 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 找不到模块：'@angular/core'。 确保已安装此 package。

您可以通过运行以下命令安装此 package：npm install @angular/core。

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

 react-scripts.cmd build exited with exit code 1. Re-running this command with the --verbose flag may provide more information.

所以我也安装了@angular/core（不知道为什么，因为我正在使用 React 但无论如何）。

在文档中写道：

BackgroundGeolocation 必须在 app.ts 内或 Geolocation 之前调用。 否则平台不会要求您提供后台跟踪权限。

所以我确实打开了 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仅适用于 angular。 因此，只需将它们导入即可。

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

您似乎还阅读了该插件的 angular 文档。

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

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

Answer 2

好的，我确实将导入更改为：

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

我保持构造函数没有接触：

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
        });
    });
  }

但它返回错误：

带有突出显示错误的 Visual Studio 打印屏幕

我正在使用电容器，这里是依赖项列表（package.json）：

"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"
  },