五分钟学GIS | iMobile for ReactNative安装及使用
来源:互联网 发布:对冲平仓 知乎 编辑:程序博客网 时间:2024/05/20 13:14
ReactNative简介
在介绍iMobile for ReactNative的安装及使用前,我们先简单了解下React Native是什么? React Native是Facebook 在2015年大会上推出的基于JavaScript 的开源框架(图一),该框架让开发人员能够使用基于JavaScript和React一致的开发体验在本地构建能同时运行在iOS和Android平台上的原生应用。相对于原生开发的优势,降低了开发语言学习成本,只需学习JS语言,提高了多平台开发的效率;可通过更新服务端JS,直接更新App,这已成为各厂商应用开发的标配。
在此技术趋势下,SuperMap iMobile推出了基于React Native框架的移动Gis应用开发工具,用户可以用JavaScript开发语言,开发出在Android和iOS操作系统下运行的原生移动GIS应用,目前已提供了地图显示、数据编辑及查询、导航分析和态势标绘等功能,用户入门门槛低,安装简单。
Windows下Android开发环境搭建:
第一:安装JDK1.8或更高版本,安装完成后配置PATH环境变量。
第二:安装Android Studio2.0或更高版本,安装完成后,运行及打开SDK Manager进行安装以下特定版本的工具:
* Tools/Android SDK Tools (24.3.3)
* Tools/Android SDK Platform-tools (22)
* Tools/Android SDK Build-tools (23.0.1)
* Android 6.0 (API 23)/SDK Platform (1)
* Extras/Android Support Library(23.0.1)
新建ANDROID_HOME系统环境变量,其值写入Android SDK的路径。追加Android SDK下的tools目录和platform-tools目录到PATH环境变量。
第三:安装Python2.7版本,暂不支持Python3.0。
第四:安装node.js6.11.2版本,安装完成后设置npm加速镜像。
npm config set registry https://registry.npm.taobao.org --globalnpm config set disturl https://npm.taobao.org/dist --global
第五:安装React Native命令行工具,该命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
npm install -g yarn react-native-cli
注:1.英文路径下安装。2.安装过程可能会比较漫长或中断,提速可设置镜像或用科学上网工具。
Android项目入门:
第一:创建项目,打开cmd,进入非系统盘目录,如D:\。初始化项目MapTest,并指定版本(0.44.3稳定)。
react-native init MapTest --version 0.44.3
第二:在线安装和链接iMobile for ReactNative类库,进入项目MapTest目录,安装如图二。
cd MapTestnpm install imobile_for_reactnative --savereact-native link imobile_for_reactnative
第三:添加Android权限,编辑../MapTest/android/app/src/main目录下的AndroidManifest.xml文件,添加如下代码:
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" /> <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
第四:打开离线地图,.编辑../MapTest目录下的index.android.js文件,其核心部分代码如图三。
第五:准备许可和数据,将移动端许可拷贝到设备的特定目录/SuperMap/License下,将World.smwu数据拷贝到设备的/SampleData/City目录下。
第六:运行Android项目前,确保已连接上Android设备(需设置为USB调试模式,开启ADB相关权限)或启动已安装的Android模拟器,结果如图四。
adb devices //检查是否有设备连接react-native run-android //运行Android程序
示例代码下载:http://pan.baidu.com/s/1eRG6Wr4
- 五分钟学GIS | iMobile for ReactNative安装及使用
- iMobile for ReactNative入门使用介绍
- 五分钟学GIS | 室内导航
- 五分钟学GIS | 倾斜摄影技术
- 五分钟学GIS | 微服务架构
- 五分钟学GIS | 多版本缓存
- 五分钟学GIS | Elasticsearch技术
- 五分钟学GIS | Spark Streaming
- 五分钟学GIS | 快速认识Leaflet
- 五分钟学GIS | BIM与三维GIS的融合
- 五分钟学GIS | Docker在GIS中的应用
- 五分钟学GIS | GIS服务器集群技术
- 五分钟学GIS | GPU在GIS技术上的应用
- 五分钟学GIS | 倾斜摄影单体化技术
- 五分钟学GIS | 时空数据可视化表达
- 五分钟学GIS | 自己动手做Docker镜像
- 五分钟学GIS | WMTS服务初步理解与读取
- 五分钟学GIS | 如何对接WMTS服务
- inout用法浅析
- 综合---有限状态机实例(附带普通状态模式)
- hdu 1269 迷宫城堡 java
- top命令动态监控进程
- 配置数据源
- 五分钟学GIS | iMobile for ReactNative安装及使用
- android studio ndk 资料整理
- Eclipse使用EGit插件连接Github的设置(一):Push篇
- ROS Robotics Projects(9)虚拟现实VR头戴设备和Leap Motion手势操控
- Re:从0开始的微服务架构:(一)重识微服务架构 http://www.infoq.com/cn/articles/micro-service-architecture-from-zero#0-you
- 通过jQuery Ajax使用FormData对象上传文件
- java读取Excel工具类
- 3d max populate人群导出fbx到unity3d
- 用Java近似求pi,利用公式pi=4*(1-1/3+1/5-1/7+.....)