在 react native 中使用 geolib 时出错答案

【问题标题】：getting an error when using geolib in react native在 react native 中使用 geolib 时出错
【发布时间】：2019-09-20 11:40:29
【问题描述】：

过去几个小时我一直在努力解决这个问题。我正在使用 Geolib 计算两点之间的距离，但我不断收到错误消息。下面是我的代码。

import React, { Component } from 'react';
import { View, Text, item } from 'react-native';
import geolib from 'geolib';
class ServiceListDetails extends Component {
  constructor(props) {
    super(props);

    this.state = {
      latitude: null,
      longitude: null,
      error: null,
    };
  }

  componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        this.setState({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          error: null,
        });
      },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
    );
  }

  render() {
    const { latitude, longitude } = this.state;

    const dist = geolib.getDistanceSimple(
  { latitude, longitude },
  { latitude: 33.935558, longitude: -117.284912 }
);
    return (
      <View style={{ flexGrow: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Latitude: {this.state.latitude}</Text>
        <Text>Longitude: {this.state.longitude}</Text>
        <Text>Miles:{dist} </Text>
        {this.state.error ? <Text>Error: {this.state.error}</Text> : null}
      </View>
    );
  }
}

export default ServiceListDetails;

当我添加这个特定的行时，我得到了错误：

   const dist = geolib.getDistanceSimple(
      { latitude, longitude },
      { latitude: 33.935558, longitude: -117.284912 }
    );

我安装 geolib 如下：

npm i geolib

并收到以下消息：

npm WARN eslint-plugin-react-native@3.2.1 requires a peer of eslint@^3.17.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ geolib@2.0.24
updated 1 package in 10.167s

以下是错误信息的屏幕截图：

添加这行代码时出现错误：

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

第一个参数需要像第二个一样是一个对象..另外，尝试使用getDistance函数..它应该看起来像这样：

const dist = geolib.getDistance(
  { latitude: latitude, longitude: longitude },
  { latitude: 33.935558, longitude: -117.284912 }
);

【讨论】：

【解决方案2】：

您必须授予应用位置访问权限。首先，将此代码添加到 AndroidManifest.xml (android > app > src > main > AndroidManifest.xml)

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

现在应该是这样的

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.packagename">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

    <application
      ...some content...
    </application>

</manifest>

然后执行 gradle clean。（我希望你知道怎么做）。之后，重启服务器（react-native run-android/ios）

【讨论】：

我已经在应用程序中有这个代码。我只是没有将代码放在我的帖子中，因为不管这段代码如何，我都不应该得到上面的错误。
在我的情况下，我在没有上述代码的情况下运行应用程序时遇到了同样的错误。