##iMobile for ReactNative入門使用介紹

####iMobile for ReactNative是SuperMap iMobile推出的一款基于React-Native框架的移動應(yīng)用開發(fā)工具,基于該開發(fā)工具,用戶可以 使用JavaScript開發(fā)語言,開發(fā)出在Android和iOS操作系統(tǒng)下運(yùn)行的原生移動GIS應(yīng)用,入門門檻低，一次開發(fā)，處處運(yùn)行。本文重點(diǎn)介紹該工具的Android環(huán)境搭建及開發(fā)入門。

一. Windows上環(huán)境搭建

1.安裝JDK，根據(jù)系統(tǒng)平臺的位數(shù)下載Java SE Development Kit 8，Android Studio需要JDK 1.8或更高版本，下載后默認(rèn)安裝，將JDK的bin目錄加入系統(tǒng)PATH環(huán)境變量。安裝完成后在命令行cmd里執(zhí)行java -version查看JDK的版本，即可檢查JDK環(huán)境是否完好。

2.安裝Android Studio，根據(jù)系統(tǒng)平臺位數(shù)選擇帶有Android Studio SDK的軟件包，目前react native需要Android Studio2.0 或更高版本，默認(rèn)進(jìn)行安裝完成，運(yùn)行后打開SDK Manager，確保以下項(xiàng)目已經(jīng)安裝并更新到最新：

• 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)

在系統(tǒng)環(huán)境變量里新建ANDROID_HOME，并將Android SDK的路徑賦給它。并將Android SDK下的tools目錄和platform-tools目錄追加到PATH環(huán)境變量。

3.安裝Python，目前不支持Python 3版本。默認(rèn)安裝即可。

4.安裝node.js，目前已知 Node 7.1 版本在 windows 上無法正常工作，默認(rèn)安裝完成后。建議設(shè)置npm鏡像以加速后面的過程（或使用科學(xué)上網(wǎng)工具）。注意：不要使用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 的命令行工具用于執(zhí)行創(chuàng)建、初始化、更新項(xiàng)目、運(yùn)行打包服務(wù)（packager）等任務(wù)。

npm install -g yarn react-native-cli

注：1.所有安裝均確保在英文路徑下。2.安裝SDK或react native可能會比較漫長也甚至中斷，是因?yàn)槠浞?wù)器在國外，提速可設(shè)置鏡像或用科學(xué)上網(wǎng)工具。

二. 開發(fā)Gis程序

1.測試react native的安裝，打開cmd，進(jìn)入磁盤，如D:\。初始化一個項(xiàng)目，并指定版本(0.52.3穩(wěn)定)。

react-native init MapTest --version 0.52.3

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

連接上Android真機(jī)設(shè)備（需設(shè)置為USB調(diào)試模式，開啟ADB相關(guān)權(quán)限，確保與PC機(jī)在同一網(wǎng)段）或啟動已安裝的Android模擬器。運(yùn)行項(xiàng)目：

cd MapTest react-native run-android

注：項(xiàng)目不可創(chuàng)建在C盤System32等類似目錄下，因?yàn)镃盤目錄涉及一些讀寫權(quán)限，會導(dǎo)致項(xiàng)目不可運(yùn)行

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

cd MapTest npm install imobile_for_reactnative --save react-native link imobile_for_reactnative

3.編寫Android配置文件，賦予讀寫等權(quán)限，在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 {//創(chuàng)建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.運(yùn)行程序，需要按照代碼中的路徑將 license 和數(shù)據(jù)拷貝到指定的路徑下。其中l(wèi)icense 文件路徑為“…/SuperMap/License/”（注意：此路徑不可修改，必須將許可文件放到此路徑下），數(shù)據(jù)文件的路徑為“…/ SampleData/GeometryInfo/”（保持代碼中的路徑與數(shù)據(jù)的實(shí)際路徑匹配即可）。可以命令行運(yùn)行也可用AS工具運(yùn)行。

adb devices //檢查是否有設(shè)備連接 react-native run-android //運(yùn)行Android程序

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。