React Native 全栈开发实战班 - 原生功能集成之地理位置服务

地理位置服务 是移动应用中常见的功能之一，应用可以通过获取用户的地理位置信息提供个性化服务，如地图导航、附近商家推荐、实时位置跟踪等。React Native 提供了多种方式来实现地理位置服务，包括使用第三方库（如 react-native-geolocation-service）和调用原生模块。本章节将详细介绍如何使用 react-native-geolocation-service 库来实现地理位置服务，包括获取当前位置、监听位置变化、权限管理以及处理位置信息。

3.1 地理位置服务概述

地理位置服务主要涉及以下几个方面：

  1. 获取当前位置： 获取用户当前的地理位置信息，包括经度、纬度、海拔等。
  2. 监听位置变化： 实时监听用户的位置变化，适用于需要实时跟踪用户位置的场景。
  3. 地理围栏（Geofencing）： 设置地理围栏，当用户进入或离开特定区域时触发相应的事件。
  4. 地图集成： 在应用中集成地图功能，显示用户位置、标记位置、绘制路线等。

React Native 提供了多种方式来实现地理位置服务：

  1. 第三方库： 如 react-native-geolocation-service, react-native-location, react-native-maps 等，提供了封装好的 API，可以快速实现地理位置功能。
  2. 原生模块： 可以通过原生代码实现自定义地理位置功能，适用于需要高度定制化的场景。

本章节将重点介绍如何使用 react-native-geolocation-service 库来实现地理位置服务。

3.2 使用 react-native-geolocation-service 库

react-native-geolocation-service 是一个流行的第三方库，用于获取和监听地理位置信息，支持 iOS 和 Android 平台。

3.2.1 安装 react-native-geolocation-service
npm install react-native-geolocation-service

链接原生依赖（React Native 0.60 及以上版本自动链接）：

cd ios
pod install
cd ..
3.2.2 配置权限

iOS:

在 Info.plist 文件中添加位置权限说明。

<key>NSLocationWhenInUseUsageDescription</key>
<string>需要访问您的位置以提供定位服务</string>
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>需要始终访问您的位置以提供定位服务</string>
<key>NSLocationAlwaysUsageDescription</key>
<string>需要始终访问您的位置以提供定位服务</string>

Android:

在 AndroidManifest.xml 文件中添加位置权限。

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

注意： 对于 Android 6.0 及以上版本，还需要在代码中动态请求权限。

3.2.3 基本用法

获取当前位置：

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, Platform, Alert } from 'react-native';
import Geolocation from 'react-native-geolocation-service';const LocationExample = () => {const [location, setLocation] = useState(null);const getLocation = () => {Geolocation.getCurrentPosition((position) => {setLocation(position);},(error) => {console.error(error);Alert.alert('获取位置失败', error.message);},{enableHighAccuracy: true,timeout: 15000,maximumAge: 10000,});};useEffect(() => {const requestLocationPermission = async () => {try {const granted = await Geolocation.requestPermission({androidPermission: {title: '位置权限',message: '应用需要访问您的位置以提供定位服务',buttonPositive: '确定',buttonNegative: '取消',},iosPermission: {title: '位置权限',message: '应用需要访问您的位置以提供定位服务',buttonPositive: '确定',buttonNegative: '取消',},});if (granted) {getLocation();} else {Alert.alert('权限被拒绝', '位置权限被拒绝，无法获取位置信息');}} catch (error) {console.error(error);}};requestLocationPermission();}, []);return (<View style={styles.container}>{location ? (<Text style={styles.text}>经度: {location.coords.longitude}, 纬度: {location.coords.latitude}</Text>) : (<Text style={styles.text}>获取位置中...</Text>)}</View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',padding: 20,},text: {fontSize: 18,},
});export default LocationExample;

解释：

  • Geolocation.getCurrentPosition 方法： 获取当前位置信息。
  • enableHighAccuracy: 是否使用高精度模式。
  • timeout: 超时时间。
  • maximumAge: 缓存位置信息的最长时间。

监听位置变化：

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, Platform, Alert } from 'react-native';
import Geolocation from 'react-native-geolocation-service';const WatchLocationExample = () => {const [location, setLocation] = useState(null);useEffect(() => {const watchId = Geolocation.watchPosition((position) => {setLocation(position);},(error) => {console.error(error);Alert.alert('监听位置失败', error.message);},{enableHighAccuracy: true,distanceFilter: 10, // 位置变化距离阈值（米）});return () => {Geolocation.clearWatch(watchId);};}, []);return (<View style={styles.container}>{location ? (<Text style={styles.text}>经度: {location.coords.longitude}, 纬度: {location.coords.latitude}</Text>) : (<Text style={styles.text}>监听位置中...</Text>)}</View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',padding: 20,},text: {fontSize: 18,},
});export default WatchLocationExample;

解释：

  • Geolocation.watchPosition 方法： 监听位置变化。
  • distanceFilter: 位置变化距离阈值，只有位置变化超过该值时才会触发回调。
3.2.4 地理围栏

地理围栏（Geofencing） 是一种基于地理位置的服务，通过在地图上定义虚拟边界，当用户进入或离开特定区域时触发相应的事件。地理围栏广泛应用于各种场景，如：

  • 零售： 当用户接近商店时，发送促销信息或优惠券。
  • 物流： 跟踪车辆或货物是否进入或离开指定区域。
  • 安全： 监控用户是否进入或离开安全区域。
  • 社交： 提醒用户附近有朋友或活动。

在 React Native 中，可以通过 react-native-geolocation-service 库结合地理计算来实现简单的地理围栏功能。以下是详细的实现步骤和示例代码。

3.2.4.1 实现地理围栏

以下是一个简单的地理围栏实现示例，当用户进入或离开指定区域时，会弹出相应的提示。

import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, Platform, Alert } from 'react-native';
import Geolocation from 'react-native-geolocation-service';const GeofencingExample = () => {const [location, setLocation] = useState(null);const [geofence, setGeofence] = useState({latitude: 37.7749,  // 地理围栏中心纬度（例如：旧金山）longitude: -122.4194, // 地理围栏中心经度radius: 500, // 地理围栏半径（米）});useEffect(() => {const watchId = Geolocation.watchPosition((position) => {setLocation(position);checkGeofence(position);},(error) => {console.error(error);Alert.alert('监听位置失败', error.message);},{enableHighAccuracy: true,distanceFilter: 10, // 位置变化距离阈值（米）});return () => {Geolocation.clearWatch(watchId);};}, []);const checkGeofence = (position) => {const { latitude, longitude } = position.coords;const { latitude: fenceLat, longitude: fenceLng, radius } = geofence;// 计算两点之间的距离（使用 Haversine 公式）const distance = haversine(latitude, longitude, fenceLat, fenceLng);if (distance <= radius) {if (!geofence.inside) {setGeofence({ ...geofence, inside: true });Alert.alert('进入地理围栏', `已进入地理围栏区域，半径: ${radius}米`);}} else {if (geofence.inside) {setGeofence({ ...geofence, inside: false });Alert.alert('离开地理围栏', `已离开地理围栏区域`);}}};// Haversine 公式计算两点之间的距离const haversine = (lat1, lon1, lat2, lon2) => {const R = 6371; // 地球半径，单位：公里const dLat = deg2rad(lat2 - lat1);const dLon = deg2rad(lon2 - lon1);const a =Math.sin(dLat / 2) * Math.sin(dLat / 2) +Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *Math.sin(dLon / 2) * Math.sin(dLon / 2);const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));const distance = R * c; // 距离，单位：公里return distance * 1000; // 转换为米};const deg2rad = (deg) => {return deg * (Math.PI / 180);};return (<View style={styles.container}><Text style={styles.text}>当前位置:</Text>{location ? (<Text style={styles.text}>经度: {location.coords.longitude}, 纬度: {location.coords.latitude}</Text>) : (<Text style={styles.text}>获取位置中...</Text>)}<Text style={styles.text}>地理围栏:</Text><Text style={styles.text}>中心: 经度 {geofence.longitude}, 纬度 {geofence.latitude}, 半径 {geofence.radius} 米</Text></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',padding: 20,},text: {fontSize: 18,marginVertical: 5,},
});export default GeofencingExample;

解释：

  • 地理围栏定义： 在 geofence 状态中定义地理围栏的中心坐标和半径。
  • 位置监听： 使用 Geolocation.watchPosition 监听用户的位置变化。
  • Haversine 公式： 计算当前位置与地理围栏中心之间的距离。
  • 进入/离开地理围栏： 当距离小于等于半径时，认为用户进入地理围栏；当距离大于半径时，认为用户离开地理围栏，并弹出相应的提示。

作者简介

前腾讯电子签的前端负责人，现 whentimes tech CTO，专注于前端技术的大咖一枚！一路走来，从小屏到大屏，从 Web 到移动，什么前端难题都见过。热衷于用技术打磨产品，带领团队把复杂的事情做到极简，体验做到极致。喜欢探索新技术，也爱分享一些实战经验，帮助大家少走弯路！

温馨提示：可搜老码小张公号联系导师

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/18369.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

【Android】线程池的初见

【Android】线程池的初见

引言 在Android当中根据用途分为主线程与子线程&#xff0c;主线程当中主要处理与界面相关的操作&#xff0c;子线程主要进行耗时操作。除了Thread本身以外&#xff0c;在Android当中还有很多扮演者线程的角色&#xff0c;比如AsyncTask&#xff08; 底层为线程池&#xff0c;…
阅读更多...
春秋云镜-2022网鼎杯

春秋云镜-2022网鼎杯

flag1 进入网站&#xff0c;发现是wordpress&#xff0c;这种一般都不会有啥直接漏洞&#xff0c;应该是插件漏洞&#xff0c;或者弱口令 fscan扫描ip 好像没扫出啥东西 wp-login进入后台 爆破密码&#xff0c;弱口令admin&#xff0c;123456&#xff0c;之前lazysysadmin好…
阅读更多...
js ResizeObserver API

js ResizeObserver API

一、ResizeObserver 是什么 ResizeObserver 是一个浏览器提供的 JavaScript API&#xff0c;用于监测一个元素的大小变化。它可以帮助开发者在元素的宽度或高度发生改变时执行某些操作&#xff0c;比如调整布局、重新渲染内容等。 二、Resize Observer和监听resize的区别及其…
阅读更多...
《探索Zynq MPSoC》学习笔记（三）

《探索Zynq MPSoC》学习笔记（三）

引言&#xff1a;本文简要介绍FPGA器件技术发展以及当今FPGA器件的体系架构和特性。 第二章 FPGA、Zynq和Zynq MPSoC&#xff08;2&#xff09; 在本章涵盖的三种器件类型中&#xff0c;FPGA是建立时间最长的&#xff0c;也是Zynq和Zynq MPSoC器件PL元件的基础。因此&#xf…
阅读更多...
支持用户注册和登录、发布动态、点赞、评论、私信等功能的社交媒体平台创建！！！

支持用户注册和登录、发布动态、点赞、评论、私信等功能的社交媒体平台创建！！！

需要整体源代码的可以在我的代码仓下载https://gitcode.com/speaking_me/social-media-platformTest.git 社交媒体平台 描述&#xff1a;社交媒体平台需要支持用户注册、发布动态、点赞、评论、私信等功能。 技术栈&#xff1a; 前端&#xff1a;React, Angular, Vue.js后端…
阅读更多...
跨平台WPF框架Avalonia教程 十五

跨平台WPF框架Avalonia教程 十五

ListBox 列表框 列表框从元素源集合中显示多行元素&#xff0c;并允许选择单个或多个。 列表中的元素可以组合、绑定和模板化。 列表的高度会扩展以适应所有元素&#xff0c;除非特别设置&#xff08;使用高度属性&#xff09;&#xff0c;或由容器控件设置&#xff0c;例如…
阅读更多...
STL之mapset续|红黑树篇

STL之mapset续|红黑树篇

STL之map&set续|红黑树篇 红黑树红黑树的规则红黑树的模拟实现 map&set的模拟实现封装map/set关于红黑树的复用红黑树模板参数set的const迭代器问题 红黑树 红黑树也是一种搜索二叉树&#xff0c;它通过颜色和规则控制树上没有一条路径会比其他路径长两倍&#xff0c;…
阅读更多...
三、计算机视觉_03LeNet5及手势识别案例

三、计算机视觉_03LeNet5及手势识别案例

1 LeNet-5基本介绍 LeNet-5是一种经典的卷积神经网络&#xff08;CNN&#xff09;架构&#xff0c;由Yann LeCun在1998年提出&#xff0c;用于手写数字识别&#xff0c;LeNet-5是卷积神经网络的开创性工作之一&#xff0c;它引入了卷积层、池化层和全连接层的组合&#xff0c;为…
阅读更多...
【论文模型复现】深度学习、地质流体识别、交叉学科融合？什么情况，让我们来看看

【论文模型复现】深度学习、地质流体识别、交叉学科融合？什么情况，让我们来看看

文献&#xff1a;蓝茜茜,张逸伦,康志宏.基于深度学习的复杂储层流体性质测井识别——以车排子油田某井区为例[J].科学技术与工程,2020,20(29):11923-11930. 本文目录 一、前言二、文献阅读-基于深度学习的复杂储层流体性质测井识别2.1 摘要2.2 当前研究不足2.3 本文创新2.4 论文…
阅读更多...
Uni-APP+Vue3+鸿蒙 开发菜鸟流程

Uni-APP+Vue3+鸿蒙 开发菜鸟流程

参考文档 文档中心 运行和发行 | uni-app官网 AppGallery Connect DCloud开发者中心 环境要求 Vue3jdk 17 Java Downloads | Oracle 中国 【鸿蒙开发工具内置jdk17&#xff0c;本地不使用17会报jdk版本不一致问题】 开发工具 HBuilderDevEco Studio【目前只下载这一个就…
阅读更多...
Unity-Editor扩展Odin + 自定义EditorWindow记录

Unity-Editor扩展Odin + 自定义EditorWindow记录

没有上下文&#xff0c;可能你不知道这是什么&#xff08;关于Odin Inspector) 在写一个 Odin 插件的完整文章&#xff0c;卡了三天&#xff0c;之后会放出 使用Unity的人之中 1/10 可能会使用Editor扩展&#xff0c;而这之中的又1/10的 人可能会用Odin这个Editor的附加扩展 -…
阅读更多...
FIFO系列 - FIFO使用中需要注意的若干问题

FIFO系列 - FIFO使用中需要注意的若干问题

FIFO使用中需要注意的若干问题 文章目录 FIFO使用中需要注意的若干问题前言场景1：包数据FIFO设计之冗余法场景2、FIFO数据传输之流控总结前言 场景1：包数据FIFO设计之冗余法 场景：类似图像、文字等码流数据是不需要重复被访问的，因此使用FIFO进行缓存（如果需要被存储，一…
阅读更多...
计算机毕业设计 | springboot+vue大学城水电管理系统 校园学校物业水电管理(附源码+文档)

计算机毕业设计 | springboot+vue大学城水电管理系统 校园学校物业水电管理(附源码+文档)

1&#xff0c;绪论 1.1 研究背景 随着计算机技术的发展以及计算机网络的逐渐普及&#xff0c;互联网成为人们查找信息的重要场所&#xff0c;二十一世纪是信息的时代&#xff0c;所以信息的管理显得特别重要。因此&#xff0c;使用计算机来管理大学城水电管理系统的相关信息成…
阅读更多...
5-对象的访问权限

5-对象的访问权限

对象的访问权限知识点 对象的分类 在数据库中&#xff0c;数据库的表、索引、视图、缺省值、规则、触发器等等、都可以被称为数据库对象&#xff0c;其中对象主要分为两类 1、模式(schema)对象&#xff1a;模式对象可以理解为一个存储目录、包含视图、索引、数据类型、函数和…
阅读更多...
药方新解：Spring Boot中药实验管理系统设计

药方新解：Spring Boot中药实验管理系统设计

3系统分析 3.1可行性分析 通过对本中药实验管理系统实行的目的初步调查和分析&#xff0c;提出可行性方案并对其一一进行论证。我们在这里主要从技术可行性、经济可行性、操作可行性等方面进行分析。 3.1.1技术可行性 本中药实验管理系统采用SSM框架&#xff0c;JAVA作为开发语…
阅读更多...
动态规划-完全背包问题——279.完全平方数

动态规划-完全背包问题——279.完全平方数

1.题目解析 题目来源 279.完全平方数——力扣 测试用例 2.算法原理 1.状态表示 完全背包问题通常都是使用一个二维数组来表示其状态&#xff0c;这里是 dp[i][j]&#xff1a;在[1,i]区间选择平方数&#xff0c;当此时已选择平方数的总和完全等于j时所选择的最小平方数个数 …
阅读更多...
二叉树的层序遍历

二叉树的层序遍历

一、题目 给定一个二叉树&#xff0c;返回该二叉树层序遍历的结果&#xff0c;&#xff08;从左到右&#xff0c;一层一层地遍历&#xff09; 例如&#xff1a; 给定的二叉树是{3,9,20,null,null,15,7}, 该二叉树层序遍历的结果是 [[3],[9,20],[15,7]] 二、解决方案 2.0 树…
阅读更多...
模型训练过程的显存占用实测

模型训练过程的显存占用实测

依赖项说明 pip install nvitop pip install timm pip install peft后续的显存占用数据截图&#xff0c;均基于nvitop命令实现 1、模型显存占用说明 1.1 理论占用值 在 一文讲明白大模型显存占用&#xff08;只考虑单卡&#xff09;与大模型显存占用分析都对模型训练过程中…
阅读更多...
后端分层解耦

后端分层解耦

引入 在上篇所举的例子中&#xff0c;我们将所有的代码均放在HelloControl方法之中&#xff0c;这样会导致代码的复用性、可读性较差&#xff0c;难以维护。因此我们需 三层架构 在之前的代码中&#xff0c;代码大体可以分为三部分&#xff1a;数据访问、数据逻辑处理、响应数…
阅读更多...
AIGC 入门全攻略：开启智能创作新时代

AIGC 入门全攻略：开启智能创作新时代

一、AIGC 初印象 AIGC&#xff0c;即人工智能生成内容&#xff0c;是继专业生产内容&#xff08;PGC&#xff09;、用户生产内容&#xff08;UGC&#xff09;之后的新型内容创作方式。它涵盖了文本生成、图像与视频创作、音频生成等多个领域&#xff0c;正在以惊人的速度改变着…
阅读更多...
最新文章

Copyright @ 2022~2023