[发明专利]一种基于ReactNative实现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的封装及调用所使用的语言不同，所以开发周期也相对较长。

发明内容

本发明为了解决跨手机平台的位置服务的技术问题，提供了一种基于React Native实现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实现跨手机平台的位置服务的方法，React Native可以快速部署和开发跨平台App，与原生开发所用地图SDK不同，React Native在页面中直接引用网页组件<WebView>，该网页组件<WebView>加载网页，起到类似浏览器的作用，调用第三方平台API(本文以百度地图为例)，通过脚本程序渲染页面内容，完成地图渲染、地理定位，以及交互行为，从而实现LBS功能，并且使LBS在React Native框架下可以敏捷开发和扩展。

具体步骤包括：

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