##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 --global npm 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.52.3穩定)。

react-native init MapTest --version 0.52.3

工程創建完成后，檢查一下工程文件夾的屬性，確保工程文件夾的屬性為非只讀。

連接上Android真機設備（需設置為USB調試模式，開啟ADB相關權限，確保與PC機在同一網段）或啟動已安裝的Android模擬器。運行項目：

cd MapTest react-native run-android

注：項目不可創建在C盤System32等類似目錄下，因為C盤目錄涉及一些讀寫權限，會導致項目不可運行

2.安裝和鏈接iMobile for ReactNative類庫，通過npm工具安裝Supermap 類庫，輸入如下命令，確保安裝到工程目錄下（RN項目根目錄下node_modules文件夾里有iMobile for ReactNative文件夾）。

cd MapTest npm install imobile_for_reactnative --save react-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 objectvar 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程序

總結

以上是生活随笔為你收集整理的iMobile for ReactNative入门使用介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。