五分钟学GIS | iMobile for 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 --global
npm 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 MapTest
npm install imobile_for_reactnative --save
react-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程序