iMobile for ReactNative入门使用介绍

iMobile for ReactNative入门使用介绍

---

iMobile for ReactNative是SuperMap iMobile推出的一款基于React-Native框架的移动应用开发工具,基于该开发工具,用户可以 使用JavaScript开发语言,开发出在Android和iOS操作系统下运行的原生移动GIS应用,入门门槛低，一次开发，处处运行。本文重点介绍该工具的Android环境搭建及开发入门。

一. Windows上环境搭建

1.安装JDK，根据系统平台的位数下载Java SE Development Kit 8，Android Studio需要JDK 1.8或更高版本，下载后默认安装，将JDK的bin目录加入系统PATH环境变量。安装完成后在命令行cmd里执行java -version查看JDK的版本，即可检查JDK环境是否完好。

2.安装Android Studio，根据系统平台位数选择带有Android Studio SDK的软件包，目前react native需要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环境变量。

3.安装Python，目前不支持Python 3版本。默认安装即可。

4.安装node.js，目前已知 Node 7.1 版本在 windows 上无法正常工作，默认安装完成后。建议设置npm镜像以加速后面的过程（或使用科学上网工具）。注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！

npm config set registry https://registry.npm.taobao.org --globalnpm config set disturl https://npm.taobao.org/dist --global

5.安装React Native 命令行工具，React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

npm install -g yarn react-native-cli

注：1.所有安装均确保在英文路径下。2.安装SDK或react native可能会比较漫长也甚至中断，是因为其服务器在国外，提速可设置镜像或用科学上网工具。

二. 开发Gis程序

1.测试react native的安装，打开cmd，进入磁盘，如D:\。初始化一个项目，并指定版本(0.44.3稳定)。

react-native init MapTest --version 0.44.3

工程创建完成后，检查一下工程文件夹的属性，确保工程文件夹的属性为非只读。

连接上Android真机设备（需设置为USB调试模式，开启ADB相关权限，确保与PC机在同一网段）或启动已安装的Android模拟器。运行项目：

cd MapTestreact-native run-android

注：项目不可创建在C盘System32等类似目录下，因为C盘目录涉及一些读写权限，会导致项目不可运行

2.安装和链接iMobile for ReactNative类库，通过npm工具安装Supermap 类库，输入如下命令，确保安装到工程目录下（RN项目根目录下node_modules文件夹里有iMobile for ReactNative文件夹）。

cd MapTestnpm install imobile_for_reactnative --savereact-native link imobile_for_reactnative

3.编写Android配置文件，赋予读写等权限，在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" />

4.编写JS代码，打开工程下的index.android.js文件，添加如下代码，即可打开一副离线地图。

import {  Workspace,    SMMapView,} from 'imobile_for_reactnative';class MapTest extends Component {  //Required funtion for obtaining the MapView object.  _onGetInstance = (mapView) => {    this.mapView = mapView;    this._addMap();  }  /**   * 初始化地图  Function for initiating the Map   * @private   */  _addMap = () => {    try {      //创建workspace模块对象      //Create workspace object      var workspaceModule = new Workspace();      //加载工作空间等一系列打开地图的操作      //Operations for loading workspace and opening map      (async function () {        try {          this.workspace = await workspaceModule.createObj();          await this.workspace.open("/SampleData/GeometryInfo/World.smwu");          this.mapControl = await this.mapView.getMapControl();          this.map = await this.mapControl.getMap();          await this.map.setWorkspace(this.workspace);          var mapName = await this.workspace.getMapName(0);          await this.map.open(mapName);          await this.map.refresh();        } catch (e) {          console.error(e);        }      }).bind(this)();    } catch (e) {      console.error(e);    }  }  render() {    return (      <View style={styles.container}>        <SMMapView ref="mapView" style={styles.map} onGetInstance={this._onGetInstance}/>      </View>    );  }}const styles = StyleSheet.create({  container: {    flex: 1,    justifyContent: 'center',    alignItems: 'center',    backgroundColor: '#F5FCFF',  },  map: {    flex: 1,    alignSelf: 'stretch',  },});AppRegistry.registerComponent('MapTest', () => MapTest);

5.运行程序，需要按照代码中的路径将 license 和数据拷贝到指定的路径下。其中license 文件路径为“../SuperMap/License/”（注意：此路径不可修改，必须将许可文件放到此路径下），数据文件的路径为“../ SampleData/GeometryInfo/”（保持代码中的路径与数据的实际路径匹配即可）。可以命令行运行也可用AS工具运行。

adb devices //检查是否有设备连接react-native run-android //运行Android程序