React Native 集成 ArcGIS 地图的详细过程

 更新时间:2024年06月21日 09:37:35   作者:kongxx  
ArcGIS官方提供了 JavaScript SDK,也提供了 ArcGIS-Runtime-SDK-iOS,但是并没有提供 React Native的版本,所以这里使用了 react-native-arcgis-mapview 库,本文给大家介绍React Native 集成 ArcGIS 地图的详细过程,感兴趣的朋友跟随小编一起看看吧

ArcGIS官方提供了 JavaScript SDK,也提供了 ArcGIS-Runtime-SDK-iOS,但是并没有提供 React Native的版本,所以这里使用了 react-native-arcgis-mapview 库,这个库比较老,支持的 ArcGIS-Runtime-SDK-iOS 版本是100.4,但是在使用的时候发现,在使用pod install安装的时候总是会下载失败,所以后面手动将 ArcGIS-Runtime-SDK-iOS 的版本改为 100.14.1。

创建工程

初始化工程(需要科学上网)

npx react-native init MyReactNativeApp

安装依赖

cd MyReactNativeApp/ios
pod install

安装react-native-arcgis-mapview

使用 npm 安装 react-native-arcgis-mapview 库

cd MyReactNativeApp
npm install react-native-arcgis-mapview

修改 ios/Podfile 文件,在最后添加

pod 'RNArcGISMapView', :path => "../node_modules/react-native-arcgis-mapview/ios"

编辑 node_modules/react-native-arcgis-mapview/ios/RNArcGISMapView.podspec,修改 dependency 版本为 100.14.1。

s.dependency 'ArcGIS-Runtime-SDK-iOS', '100.4'
=>
s.dependency 'ArcGIS-Runtime-SDK-iOS', '100.14.1'

使用 pod install 安装 ArcGIS-Runtime-SDK-iOS

cd MyReactNativeApp/ios
pod install

使用 react-native-arcgis-mapview

在 App.js 中使用 react-native-arcgis-mapview 库,完整代码如下

import React, {useRef, useState}from 'react'
import {View, Text, Button, StyleSheet } from 'react-native'
import ArcGISMapView, { setLicenseKey } from 'react-native-arcgis-mapview'
function App() {
  const key = '<key>'
  setLicenseKey(key)
  const mapView = useRef(null)
  const basemap = 'https://www.arcgis.com/home/item.html?id=6b6b9cea06964cb38d8a654964c347ab'
  return (
    <View style={styles.container}>
      <ArcGISMapView
          style={styles.map} 
          initialMapCenter={[{latitude: 32.788, longitude: -79.940, scale: 10000.0}]}
          basemapUrl={basemap}
          ref={mapView}
      />
      <Button title="Test" onPress={() => {
          console.log(mapView.current.props.basemapUrl)
      }} />
    </View>
  );
}
var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  map: {
    flex: 1,
  },
})
export default App

验证

运行项目,验证是否成功。

npm start

到此这篇关于React Native 集成 ArcGIS 地图的文章就介绍到这了,更多相关React Native ArcGIS 地图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • React鼠标多选功能的配置方法

    React鼠标多选功能的配置方法

    本文给大家分享React鼠标多选功能,通过导入组件直接包裹已经设计好的列表即可,操作简单方便,对React鼠标多选相关知识感兴趣的朋友一起看看吧
    2021-05-05
  • react父组件更改props子组件无法刷新原因及解决方法

    react父组件更改props子组件无法刷新原因及解决方法

    使用过vue的朋友都知道,vue父组件更改props的值,子组件是会刷新的,而react就未必,今天通过一个例子给大家介绍react父组件更改props子组件无法刷新原因,需要的朋友可以参考下
    2022-09-09
  • 解决React报错The tag is unrecognized in this browser

    解决React报错The tag is unrecognized in this browser

    这篇文章主要为大家介绍了解决React报错The tag is unrecognized in this browser示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • React diff算法的实现示例

    React diff算法的实现示例

    这篇文章主要介绍了React diff算法的实现示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 回顾Javascript React基础

    回顾Javascript React基础

    这篇文章主要介绍了Javascript React基础,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的同学可以参考一下
    2019-06-06
  • React Flux与Redux设计及使用原理

    React Flux与Redux设计及使用原理

    这篇文章主要介绍了React Flux与Redux设计及使用,Redux最主要是用作应用状态的管理。简言之,Redux用一个单独的常量状态树(state对象)保存这一整个应用的状态,这个对象不能直接被改变
    2023-03-03
  • React表中显示JSON数据demo

    React表中显示JSON数据demo

    这篇文章主要为大家介绍了React表中显示JSON数据demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • react路由v6版本NavLink的两个小坑及解决

    react路由v6版本NavLink的两个小坑及解决

    这篇文章主要介绍了react路由v6版本NavLink的两个小坑及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • React实现原生APP切换效果

    React实现原生APP切换效果

    最近需要使用 Hybrid 的方式开发一 个 APP,交互和原生 APP 相似并且需要 IM 通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常详细,感兴趣的小伙伴跟着小编一起来看看吧
    2025-01-01
  • 使用React制作一个贪吃蛇游戏的代码详解

    使用React制作一个贪吃蛇游戏的代码详解

    Snake Game 使用 ReactJS 项目实现功能组件并相应地管理状态,开发的游戏允许用户使用箭头键控制蛇或触摸屏幕上显示的按钮来收集食物并增长长度,本文给大家详细讲解了如何使用 React 制作一个贪吃蛇游戏,需要的朋友可以参考下
    2023-11-11

最新评论