为什么 navigator.geolocation.getcurrentposition 不适用于 React Native 和 Expo

Question

我正在尝试从设备获取一些位置信息，我在 android 移动设备上使用 React-native、Expo 和 ExpoGo，我没有使用模拟器，应用程序在 Android，但地理定位不起作用，每次都会发送此错误消息： window.navigator.geolocation.getCurrentPosition is not available. Import and execute installWebGeolocationPolyfill() from expo-location to add it, or use the expo-location APIs instead.

请帮我找到解决这个问题的方法。

这是使用的App代码：

import { Text, View} from "react-native";
import styles from "./styles";

const API_KEY = "";
const URL = `https://maps.google.com/maps/api/geocode/json?key=${API_KEY}&latlng=`;

export default function WhereAmI() {
  const [address, setAddress] = useState("loading...");
  const [longitude, setLongitude] = useState();
  const [latitude, setLatitude] = useState();

  useEffect(() => {
    function setPosition({ coords: { latitude, longitude } }) {
      setLongitude(longitude);
      setLatitude(latitude);
      fetch(`${URL}${latitude},${longitude}`)
        .then(
          (resp) => resp.json(),
          (e) => console.error(e)
        )
        .then(({ results }) => {
          setAddress(results[0].formatted_address);
        });
    }

    navigator.geolocation.getCurrentPosition(setPosition);

    let watcher = navigator.geolocation.watchPosition(
      setPosition,
      (err) => console.error(err),
      { enableHighAccuracy: true }
    );

    return () => {
      navigator.geolocation.clearWatch(watcher);
    };
  });

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Address: {address}</Text>
      <Text style={styles.label}>Latitude: {latitude}</Text>
      <Text style={styles.label}>Longitude: {longitude}</Text>
    </View>
  );
}

Answer 1

我解决了这个问题，这对我有用。

iOS 和 Android 上的地理位置：

我通过运行 expo install expo-location 安装了 expo-location 包。
我将 App.js 中的世博会位置导入为位置：import * as Location from 'expo-location'。
我使用了 #installWebGeolocationPolyfill 函数，该函数填充 #navigator.geolocation 以与核心 React Native 互操作和 Web API 在使用 #navigator.geolocation.getCurrentPosition 之类的方法之前进行地理定位这个：

       # ... some code

      Location.installWebGeolocationPolyfill()
      navigator.geolocation.getCurrentPosition(setPosition);

      # ... some code

2.The 错误 'formatted_address' 未定义：那是因为没有 API_KEY，你应该从 Google 得到一个 API 键，相反，我只是手动将它添加到 #setPosition 函数中，如下所示：

 #...some code

.then(
          ({ results }) => {
            results[0]={formatted_address:"here"}
            setAddress(results[0].formatted_address)
          },

 #...some code

为什么 navigator.geolocation.getcurrentposition 不适用于 React Native 和 Expo

Why navigator.geolocation.getcurrentposition is not available with react native and expo

android

geolocation

reactjs

react-native

expo