离子 5 反应电容器 / Cordova cordova-plugin-uid

Question

我是 Ionic 和 React 的新手。 我正在尝试构建组件来跟踪设备的 GPS 坐标，并通过 AJAX 将它们发送到后端 API。 我能够开发跟踪，包括向 API 发送数据，但我不知道如何启动和显示/存储设备 UID。

我确实遵循了此处的指南https://ionicframework.com/docs/native/unique-device-id但没有信息如何在 React 中启动插件，始终仅在 Angular 中。

这是代码：

import React from "react";
import { stopwatchOutline, play, stop } from "ionicons/icons";
import {
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonContent,
  IonIcon,
  IonGrid,
  IonRow,
  IonCol,
  IonButton,
} from "@ionic/react";

import { UniqueDeviceID } from '@ionic-native/unique-device-id/ngx';

type State = {
  intervalID: number;
  latitude: number;
  longitude: number;
  trackingEnabled: boolean;
  counter: number;
  device_id: string;
};


class GPS extends React.Component<any, State> {
  constructor(props: any) {
    super(props);

    this.state = {
      intervalID: 0,
      latitude: 0,
      longitude: 0,
      trackingEnabled: false,
      counter: 0,
      device_id: '',
    };
  }

  startTracking = () => {
    this.setState({ trackingEnabled: true });

    const intervalID = window.setInterval(() => {
      navigator.geolocation.getCurrentPosition((position) => {
        let latitude = position.coords.latitude;
        let longitude = position.coords.longitude;

        if (latitude > 0 && longitude > 0) {
          if (
            latitude !== this.state.latitude &&
            longitude !== this.state.longitude
          ) {
            fetch("http://xyz", {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({
                device_id: 123456,
                lat: latitude,
                lng: longitude,
              }),
            })
              .then(async (response) => {
                const data = await response.json();
                if (!response.ok) {
                  const error = (data && data.message) || response.status;
                  return Promise.reject(error);
                }

                console.log(data);
              })
              .catch((error) => {
                console.error("There was an error!", error);
              });
          } else {
            console.log(
              "lat: " + latitude + ", lng: " + longitude + " are without change"
            );
          }
        }

        this.setState({ latitude: latitude, longitude: longitude, counter: this.state.counter+1 });

        console.log("lat: " + latitude + ", lng: " + longitude, " counter: " + this.state.counter);

        if(this.state.counter > 10) {
          this.setState({ trackingEnabled: false });
          window.clearInterval(this.state.intervalID);
          console.log("stop after thousands call");
        }
      });
    }, 2000);

    this.setState({ intervalID: intervalID });

    console.log("start");
  };

  stopTracking = () => {
    this.setState({ trackingEnabled: false });
    window.clearInterval(this.state.intervalID);
    console.log("stop");
  };

  render() {
    return (
      <IonPage>
        <IonHeader>
          <IonToolbar color="primary">
            <IonTitle>
              <IonIcon icon={stopwatchOutline} /> &nbsp; GPS tracker
            </IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonGrid>
            <IonRow>
              <IonCol>
                <h3>lat: {this.state.latitude}</h3>
                <h3>lng: {this.state.longitude}</h3>
                <h3>Device ID: {this.state.device_id}</h3>
              </IonCol>
            </IonRow>
            <IonRow>
              <IonCol>
                <IonButton
                  id="start_tracking"
                  color="primary"
                  expand="block"
                  strong={true}
                  size="large"
                  disabled={this.state.trackingEnabled}
                  onClick={this.startTracking}
                >
                  <IonIcon icon={play} /> Start
                </IonButton>
              </IonCol>
              <IonCol>
                <IonButton
                  id="stop_tracking"
                  color="light"
                  expand="block"
                  size="large"
                  disabled={!this.state.trackingEnabled}
                  onClick={this.stopTracking}
                >
                  <IonIcon icon={stop} /> Stop
                </IonButton>
              </IonCol>
            </IonRow>
          </IonGrid>
        </IonContent>
      </IonPage>
    );
  }
}

export default GPS;

在文档中是这样写的（对于 Angular）：

import { UniqueDeviceID } from '@ionic-native/unique-device-id/ngx';

constructor(private uniqueDeviceID: UniqueDeviceID) { }

...

this.uniqueDeviceID.get()
  .then((uuid: any) => console.log(uuid))
  .catch((error: any) => console.log(error));

但我不知道如何在我的 class 中的 React 中做到这一点。 我用谷歌搜索了 2 天，尝试了我发现的所有东西，但仍然没有解决方案。

谢谢你。

Answer 1

来自文档中的示例 - https://ionicframework.com/docs/native/community#react

安装

npm install @ionic-native/core
npm install cordova-plugin-uniquedeviceid
npm install @ionic-native/unique-device-id
ionic cap sync

import { UniqueDeviceID } from '@ionic-native/unique-device-id'

然后你只需在你的组件中使用它

const uid = await UniqueDeviceID.get()

Answer 2

好的，我确实尝试过，但不起作用。 这是错误消息：

SyntaxError: F:\hybrid-app-development\job\sportis\gps-tracking\src\pages\GPS.tsx: Unexpected token, expected ";" (40:22)
[react-scripts]   38 |     };
[react-scripts]   39 | 
[react-scripts] > 40 |     const uid = await UniqueDeviceID.get();
[react-scripts]      |                       ^
[react-scripts]   41 |   }
[react-scripts]   42 | 
[react-scripts]   43 |   startTracking = () => {

这是依赖项列表（因此应安装插件）：

{
    "@capacitor/core": "2.4.5",
    "@ionic-native/android-permissions": "^5.30.0",
    "@ionic-native/core": "^5.30.0",
    "@ionic-native/location-accuracy": "^5.30.0",
    "@ionic-native/unique-device-id": "^5.30.0",
    "@ionic/react": "^5.0.7",
    "@ionic/react-router": "^5.0.7",
    "@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-request-location-accuracy": "^2.3.0",
    "cordova-plugin-uniquedeviceid": "^1.3.2",
    "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"
  }

这是一个更新的构造函数，它返回该错误：

constructor(props: any) {
    super(props);

    this.state = {
      intervalID: 0,
      latitude: 0,
      longitude: 0,
      trackingEnabled: false,
      counter: 0,
      device_id: '',
    };

    const uid = await UniqueDeviceID.get();
  }

我试着说：

const uid = await UniqueDeviceID.get();

到“startTracking”方法但同样的问题。

有什么不同的建议吗？

非常感谢！