在开发基于 React Native 的应用程序时，跟踪地理位置变化是非常常见的需求。虽然 React Native 已经内置了 Geolocation API，但是有些开发者对此感到不满意，原因是 Geolocation API 有时会有延迟或是不准确。因此，我们需要寻找其他的方式来监测地理位置变化。
在这篇文章中，我们将介绍一个外部的 npm 包 react-native-geolocation-monitor，它可以以非常高的精度监测设备的地理位置变化。我们将讲解如何使用这个包进行地理位置追踪，并提供一些示例代码作为参考。
安装 react-native-geolocation-monitor
在开始使用 react-native-geolocation-monitor 之前，我们需要将它安装到我们的 React Native 项目中。可以通过 npm 或 yarn 来完成安装：
npm install react-native-geolocation-monitor --save
或者
yarn add react-native-geolocation-monitor
在安装完成后，我们需要进行一些配置来确保 react-native-geolocation-monitor 能够在我们的项目中正常运行。
配置 react-native-geolocation-monitor
首先，我们需要在项目的 Android 和 iOS 文件夹中进行一些配置。
Android 配置
在 AndroidManifest.xml 文件中添加如下内容：
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
在 AndroidManifest.xml 文件的 application 标签中添加如下内容：
<service android:name="com.reactnativegeolocationmonitor.LocationService"/>
在 app/build.gradle 文件中添加如下内容：
-- -------------------- ---- -------
------- -
---------- -
------- -
---
------------- ----
-
-
---
-
------------ -
---
-------------- --------------------------------------------
---
-iOS 配置
在 Xcode 中，在项目的 info.plist 文件中添加如下内容：
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key> <string>Your message to user when the app is asking for location permission</string> <key>NSLocationWhenInUseUsageDescription</key> <string>Your message to user when the app is asking for location permission</string>
在项目的 Podfile 文件中添加如下内容：
pod 'react-native-geolocation-monitor', path: '../node_modules/react-native-geolocation-monitor'
在命令行中运行：
pod install
使用 react-native-geolocation-monitor
react-native-geolocation-monitor 提供了 start 和 stop 两个方法来启动和停止位置监测服务。下面是一个简单的示例代码，可以帮助你理解如何使用它来进行位置监测：
-- -------------------- ---- -------
------ ------------------ ---- -----------------------------------
----- --- ------- --------------- -
------------------ -
-------------
---------- - -
--------- -----
--
-
------------------- -
----------------------------------- -- -
--------------- -------- ---
---
-
---------------------- -
--------------------------
-
-------- -
----- - -------- - - -----------
------ -
------
--------------- --------- -- -------------------------
---------------- --------- -- --------------------------
-------
--
-
-在上面的示例代码中，我们通过 import 命令引入了 react-native-geolocation-monitor，然后在组件的 componentDidMount 生命周期方法中调用了 start 方法来启动位置监测服务。start 方法接受一个回调函数作为参数，当位置发生变化时，这个回调函数会被触发。我们在回调函数中通过 setState 方法来更新组件的状态，以此来反映位置变化的数据。
在组件的 componentWillUnmount 生命周期方法中，我们调用了 stop 方法来停止位置监测服务，以免在组件被卸载时仍然继续监测位置变化。
总结
在本文中，我们介绍了 react-native-geolocation-monitor 这个 npm 包，并讲解了如何配置和使用它来监测设备的地理位置变化。我们提供了一个简单的示例代码，可以帮助你快速上手使用 react-native-geolocation-monitor。如果你在开发 React Native 应用程序时需要跟踪设备的地理位置变化，那么 react-native-geolocation-monitor 很可能是一个非常好的解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668e5d9381d61a3540b05