CN107347179A - 一种基于ReactNative实现LBS的方法 - Google Patents

Abstract

本发明涉及一种基于React Native实现LBS的方法，属于移动App开发技术领域；为了解决跨手机平台的位置服务的技术问题；具体步骤包括：开发者在React Native页面中引入兼容Android和IOS的封装后的网页组件，在React Native网页组件中编写脚本程序，脚本程序调用第三方平台API，第三方平台API访问终端设备的GPS，获取终端设备所在地的经纬度，实现终端设备定位，第三方平台API渲染以定位点为中心的区域地图，建立React Native与网页组件双向通讯，实现LBS定位功能；本方法在React Native框架兼容Android和iOS平台的良好特性下，使用其提供的网页组件<WebView>实现LBS功能，体现出其在项目实践中开发成本小、开发周期短、跨平台、便于维护等优点。

Description

一种基于React Native实现LBS的方法

技术领域

本发明涉及一种基于React Native实现LBS的方法，属于移动App开发技术领域。

背景技术

目前，很多社交、生活服务类的移动端App(应用程序)都使用了LBS(Location-Based Service，地理位置服务)。通过借助第三方平台，例如百度地图、高德地图、腾讯地图等，开发者可以有效调用其丰富的API(应用程序编程接口)，例如JavaScript API、URI API等，实现个性化服务。

通常情况下，开发一款移动应用要面向Android和iOS系统，也就是主流的安卓手机和苹果手机。软件公司需要配置专门的针对不同平台的开发人员，因为两者的开发环境、开发语言、开发工具等差异迥然。具体而言，Android系统一般在Windows操作系统下，使用Android Studio(或Eclipse)开发工具，用Java语言编程；iOS系统一般在Mac OS(X)操作系统，使用Xcode开发工具，用Objective-C(或Swift)语言编程。所以，平台的差异意味着开发人员需要具备不同的开发技能，软件公司一般也要配置Android和iOS开发人员。每当应用中增加一个功能或解决一处公共的bug，那么就要同时开发或维护。

如果开发一款同时面向Android和iOS的位置服务应用，开发人员还需要针对不同平台分别下载SDK，在工程项目中配置环境，调用API实现位置服务功能。由于SDK的封装及调用所使用的语言不同，所以开发周期也相对较长。

发明内容

本发明为了解决跨手机平台的位置服务的技术问题，提供了一种基于ReactNative实现LBS的方法。

本发明技术方案如下：

一种基于React Native实现LBS的方法，具体步骤包括：

步骤a、开发者在React Native页面中引入兼容Android和IOS的封装后的网页组件；

步骤b、在React Native网页组件中编写脚本程序，脚本程序调用第三方平台API，第三方平台API访问终端设备的GPS，获取终端设备所在地的经纬度，实现终端设备定位，第三方平台API渲染以定位点为中心的区域地图；

步骤c、建立React Native与网页组件双向通讯，实现LBS定位功能；

(1)React Native调用后台数据库获取信息数据，并将信息数据传递至网页组件；

(2)网页组件通过脚本程序调用第三方平台API，脚本程序将得到的信息数据绘制成用户所用的坐标点图标以及信息窗口内容；

(3)用户点击坐标点图标后，网页页面会弹出信息窗口，选择从网页组件返回React Native，实现LBS定位。

本发明的有益效果：该方法在React Native框架兼容Android和iOS平台的良好特性下，使用其提供的网页组件<WebView>实现LBS功能，体现出其在项目实践中开发成本小、开发周期短、跨平台、便于维护等优点。

附图说明

图1为本发明一种基于React Native实现LBS的方法的示意图。

具体实施方式

下面结合附图对本发明作进一步阐述。

如图1所示，一种基于React Native实现LBS的方法，具体是一种通过Facebook公司开源的移动端JavaScript框架React Native实现跨手机平台的位置服务的方法，ReactNative可以快速部署和开发跨平台App，与原生开发所用地图SDK不同，React Native在页面中直接引用网页组件<WebView>，该网页组件<WebView>加载网页，起到类似浏览器的作用，调用第三方平台API(本文以百度地图为例)，通过脚本程序渲染页面内容，完成地图渲染、地理定位，以及交互行为，从而实现LBS功能，并且使LBS在React Native框架下可以敏捷开发和扩展。

具体步骤包括：

步骤a、开发者在React Native页面中引入了很多常用的兼容Android和iOS的封装组件，例如视图组件<View>、文本组件<Text>、图片组件<Image>等，这些组件在每个平台的显示遵循对应的原生风格，并在很大程度上做到了代码重用，即同一份代码只需要稍作修改，就可以在不同平台渲染相同的视图。

其中，开发者在React Native页面中引入网页组件<WebView>。React Native的网页组件<WebView>是兼容Android和iOS的封装后的网页组件，可以加载HTML、CSS、JavaScript，能够像浏览器一样加载网页，开发者在网页中渲染地图，并尝试开发更丰富的位置服务功能。

步骤b、网页组件<WebView>调用百度地图JavaScript API渲染内容。在ReactNative网页组件<WebView>中编写脚本程序JavaScript代码，脚本程序调用第三方平台百度地图JavaScript API，第三方平台百度地图JavaScript API访问终端设备的GPS，获取终端设备所在地的经纬度，从而实现终端设备定位，第三方平台百度地图JavaScript API渲染以定位点为中心的区域地图(也可以根据需求渲染目标区域及缩放级别)。

JavaScript API目前的版本是2.0，开发者需要以个人开发者身份或者企业用户身份申请密钥，方可使用。两者在服务、并发调用等服务条款有不同的标准，视开发需求而异。申请密钥后，直接在网页的头部引用库文件，并在连接地址中添加密钥参数，即可使用。

步骤c、建立React Native与网页组件<WebView>双向通讯，实现LBS定位。

这一步是实现LBS功能的关键，因为虽然有了地图定位，但应用却没有给用户带来实质性的服务功能，因此在React Native与网页组件<WebView>间需要建立通讯机制，通过交互行为，增强服务体验。通讯机制的建立分为以下三步：

(1)React Native调用后台数据库获取餐饮、银行或定制化的显示信息数据(例如坐标点经纬度、名称、图片或其它字段)，并以发送数据方法postMessage()将信息数据传递至网页组件<WebView>。

(2)网页组件<WebView>通过脚本程序调用第三方平台百度地图JavaScript API，脚本程序将得到的信息数据绘制成用户所用的坐标点图标以及信息窗口内容。

(3)用户点击坐标点图标后，网页页面会弹出信息窗口，选择点击“导航”或者“详细”按键触发事件，该操作指令从网页组件<WebView>返回给React Native端。ReactNative端调用获取数据方法onMessage()接收操作指令，跳转到导航页面或详情页面，从而实现LBS定位。

需要注意的是，React Native版本<0.37(截至撰文为止，React Native的最新版本为0.42)，需要引用第三方开源组件react-native-webview-bridge，因为在RN早先版本，官方并没有提供网页组件<WebView>的通讯方法。<WebViewBridge>组件实际上是对网页组件<WebView>的再次封装，增加了传递信息的方法。React Native>＝0.37，即在0.37版本中Facebook的React Native团队对<WebView>增加了通讯方法，即从RN传递到网页组件<WebView>信息的postMessage()方法，RN接收网页组件<WebView>信息的onMessage()方法，所以使用该范围的RN版本创建项目时无需再引用react-native-webview-bridge组件了。

Claims (1)

1.一种基于React Native实现LBS的方法，其特征在于，具体步骤包括：

步骤a、开发者在React Native页面中引入兼容Android和IOS的封装后的网页组件；

步骤b、在React Native网页组件中编写脚本程序，脚本程序调用第三方平台API，第三方平台API访问终端设备的GPS，获取终端设备所在地的经纬度，实现终端设备定位，第三方平台API渲染以定位点为中心的区域地图；

步骤c、建立React Native与网页组件双向通讯，实现LBS定位功能；

(1)React Native调用后台数据库获取信息数据，并将信息数据传递至网页组件；

(2)网页组件通过脚本程序调用第三方平台API，脚本程序将得到的信息数据绘制成用户所用的坐标点图标以及信息窗口内容；

(3)用户点击坐标点图标后，网页页面会弹出信息窗口，选择从网页组件返回ReactNative，实现LBS定位。