# MapGIS-Mobile-React-Native

**Repository Path**: osmapgis/MapGIS-Mobile-React-Native

## Basic Information

- **Project Name**: MapGIS-Mobile-React-Native
- **Description**: MapGIS Mobile for React Native，是MapGIS推出的一款基于React Native的跨平台移动开发框架，用户可以基于它使用JavaScript开发出在Android和iOS平台下运行的原生移动GIS应用。
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 2
- **Created**: 2020-06-30
- **Last Updated**: 2025-04-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MapGIS-Mobile-React-Native

MapGIS Mobile for React Native，是MapGIS推出的一款基于React Native的跨平台移动开发框架，用户可以基于它使用JavaScript开发出在Android和iOS平台下运行的原生移动GIS应用。

<div align="center">

<img src="https://images.gitee.com/uploads/images/2020/0630/122224_fcfae29d_1195603.png" height="400" width="650"  >

<img src="https://images.gitee.com/uploads/images/2020/0630/123128_08194270_1195603.png" height="450" width="650"  >

<img src="https://images.gitee.com/uploads/images/2020/0630/123734_59e6d7a6_1195603.png" height="450" width="650"   >

<img src="https://images.gitee.com/uploads/images/2020/0630/123752_cb3a091d_1195603.png" height="450" width="650"   >

 </div>

## 在线资源
[MapGIS移动端资源中心-云开发世界](http://www.smaryun.com/dev/resource_center.html#/type27/tag186/page1)

## 在线服务
[问答社区-云听](http://www.smaryun.com/cloudlisten/index.php)

## 安装

在React Native项目中安装 `@mapgis/mobile-react-native` 包。

```bash
yarn add @mapgis/mobile-react-native
# or with npm
# npm install @mapgis/mobile-react-native
```

### 链接原生库

- **React Native 0.60 and higher**

  [linking is automatic](https://github.com/react-native-community/cli/blob/master/docs/autolinking.md)，不需要执行任何操作。

- **React Native 0.59 and lower**

  如果您使用的是旧版本的React Native，则需要手动链接：

  ```sh
  react-native link @mapgis/mobile-react-native
  ```

## 用法


```js
// In App.js
import React, { Component } from "react";
import { Platform, StyleSheet, View, PermissionsAndroid } from "react-native";
import { Environment, MGMapView } from "@mapgis/mobile-react-native";

export default class App extends Component {
  onGetInstance = mapView => {
    this.mapView = mapView;
    this.openMap();
  };

  openMap = async () => {
    //请求权限
    await requestMultiplePermission();

    //初始化环境目录
    var environmnetModule = new Environment();
    var environmnet = await environmnetModule.createObj();
    await environmnet.initialize("MapGISSample");

    //请求授权
    await environmnet.requestAuthorization();

    //加载文档
    await this.mapView.loadFromFile(
      "MapGISSample/Map/MapShow/WuHan/WuHan.mapx"
    );
  };

  render() {
    return (
      <View style={styles.container}>
        <MGMapView
          ref="mapView"
          onGetInstance={this.onGetInstance}
          style={styles.mapView}
        />
      </View>
    );
  }
}

function checkGranted(granteds) {
  const values = Object.values(granteds);
  let isGranted = true;
  for (let i = 0; i < values.length - 1; i++) {
    if (values[i] != values[i + 1]) {
      isGranted = false;
      break;
    }
  }
  if (isGranted && values[0] === PermissionsAndroid.RESULTS.GRANTED) {
    return true;
  }
  return false;
}

async function requestMultiplePermission() {
  if (Platform.OS === "ios") return;

  try {
    const permissions = [
      PermissionsAndroid.PERMISSIONS.WRITE_EXTERNAL_STORAGE,
      PermissionsAndroid.PERMISSIONS.READ_PHONE_STATE
    ];
    //返回得是对象类型
    const granteds = await PermissionsAndroid.requestMultiple(permissions);
    if (!checkGranted(granteds)) {
      throw new Error("授权拒绝，无法正常使用本应用");
    }
  } catch (err) {
    throw new Error("授权失败，无法正常使用本应用");
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  mapView: {
    flex: 1,
    alignSelf: "stretch"
  }
});
```