在 Ionic React 中获取组件安装位置并传递给 App State

Question

我想获取 Location 并传递到 ionic-React 中的状态

App.tsx 文件。我想在App挂载时调用该函数提示位置访问

import React, { useEffect, useState } from "react";
import { Redirect, Route } from "react-router-dom";
import { IonApp, IonRouterOutlet, IonSplitPane } from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";
import { Geolocation } from "@ionic-native/geolocation";
import { setupConfig } from "@ionic/react";
import { Plugins, Capacitor } from "@capacitor/core";
import { useHistory } from "react-router-dom";
import Home from "./pages/Home/Home";

/* 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";
import "../src/utils/spacing.css";

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

/* Components */
import Dashboard from "./pages/Dashboard/Dashboard";
import SideMenu from "./components/SideMenu/SideMenu";
import LoginPage from "./pages/Login/Login";
import SignupPage from "./pages/Signup/Signup";
import Create from "./pages/Create/Create";
import Edit from "./pages/Edit/Edit";

setupConfig({
  hardwareBackButton: false,
});

const App: React.FC = () => {
  const [location, setLocation] = useState<object>({ long: "", lat: "" });
  const history = useHistory();

  const getBackButton = () => {
    if (Capacitor.isNative) {
      Plugins.App.addListener("backButton", (e) => {
        if (
          window.location.pathname === "/dashboard/Home" ||
          window.location.pathname === "/"
        ) {
          Plugins.App.exitApp();
        } else if (window.location.pathname === "/dashboard/") {
          history.push("/dashboard/");
        } else {
          history.goBack();
        }
      });
    }
  };

  const getLocation = async () => {
    try {
      const yourLocation = await Geolocation.getCurrentPosition();
      const lat = yourLocation.coords.latitude;
      const long = yourLocation.coords.longitude;
      alert(JSON.stringify(location, null, 2));
      setLocation({
        long,
        lat,
      });
      console.log(location);
    } catch (error) {
      alert(error);
      console.log(error);
    }
  };

  getLocation();

  useEffect(() => {
    getBackButton();
  }, []); // eslint-disable-line

  return (
    <IonApp>
      <IonReactRouter>
        <IonSplitPane contentId="main">
          <SideMenu />
          <IonRouterOutlet id="main">
            <Route path="/dashboard/:name" component={Dashboard} exact />
            <Route path="/dashboard/Edit/:id" component={Edit} exact />
            <Route path="/login" component={LoginPage} exact />
            <Route path="/create" component={Create} exact />
            <Route path="/signup" component={SignupPage} exact />
            <Route path="/" component={Home} exact />
            <Redirect from="/dashboard" to="/dashboard/Home" exact />
          </IonRouterOutlet>
        </IonSplitPane>
      </IonReactRouter>
    </IonApp>
  );
};

export default App;

我想将接收到的Location设置为名为location的App State。

我收到类似 ionic config was already initialized 的错误并且数据未通过。

当我调用该函数时，它运行并且总是提示此错误

ionic config was already initialized

Answer 1

你应该使用电容器插件进行地理定位... https://capacitorjs.com/docs/apis/geolocation

import { Plugins } from '@capacitor/core';

const { Geolocation } = Plugins;

class GeolocationExample {
  async getCurrentPosition() {
    const coordinates = await Geolocation.getCurrentPosition();
    console.log('Current', coordinates);
  }

  watchPosition() {
    const wait = Geolocation.watchPosition({}, (position, err) => {
    })
  }
}
``

在 Ionic React 中获取组件安装位置并传递给 App State

Get Location on component mount and pass to App State in Ionic React

reactjs

ionic-framework

ionic5