React Native 集成 ArcGIS 地圖的詳細(xì)過(guò)程
ArcGIS官方提供了 JavaScript SDK，也提供了 ArcGIS-Runtime-SDK-iOS，但是并沒(méi)有提供 React Native的版本，所以這里使用了 react-native-arcgis-mapview 庫(kù)，這個(gè)庫(kù)比較老，支持的 ArcGIS-Runtime-SDK-iOS 版本是100.4，但是在使用的時(shí)候發(fā)現(xiàn)，在使用pod install安裝的時(shí)候總是會(huì)下載失敗，所以后面手動(dòng)將 ArcGIS-Runtime-SDK-iOS 的版本改為 100.14.1。
創(chuàng)建工程
初始化工程（需要科學(xué)上網(wǎng)）
npx react-native init MyReactNativeApp
安裝依賴
cd MyReactNativeApp/ios pod install
安裝react-native-arcgis-mapview
使用 npm 安裝 react-native-arcgis-mapview 庫(kù)
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 庫(kù)，完整代碼如下
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驗(yàn)證
運(yùn)行項(xiàng)目，驗(yàn)證是否成功。
npm start
到此這篇關(guān)于React Native 集成 ArcGIS 地圖的文章就介紹到這了,更多相關(guān)React Native ArcGIS 地圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文給大家分享React鼠標(biāo)多選功能，通過(guò)導(dǎo)入組件直接包裹已經(jīng)設(shè)計(jì)好的列表即可，操作簡(jiǎn)單方便,對(duì)React鼠標(biāo)多選相關(guān)知識(shí)感興趣的朋友一起看看吧2021-05-05
react父組件更改props子組件無(wú)法刷新原因及解決方法
使用過(guò)vue的朋友都知道，vue父組件更改props的值，子組件是會(huì)刷新的，而react就未必，今天通過(guò)一個(gè)例子給大家介紹react父組件更改props子組件無(wú)法刷新原因,需要的朋友可以參考下2022-09-09
解決React報(bào)錯(cuò)The?tag?is?unrecognized?in?this?browser
這篇文章主要為大家介紹了解決React報(bào)錯(cuò)The?tag?is?unrecognized?in?this?browser示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
這篇文章主要介紹了React diff算法的實(shí)現(xiàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-04-04
這篇文章主要介紹了Javascript React基礎(chǔ)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的同學(xué)可以參考一下2019-06-06
React?Flux與Redux設(shè)計(jì)及使用原理
這篇文章主要介紹了React?Flux與Redux設(shè)計(jì)及使用，Redux最主要是用作應(yīng)用狀態(tài)的管理。簡(jiǎn)言之，Redux用一個(gè)單獨(dú)的常量狀態(tài)樹(shù)（state對(duì)象）保存這一整個(gè)應(yīng)用的狀態(tài)，這個(gè)對(duì)象不能直接被改變2023-03-03
這篇文章主要為大家介紹了React表中顯示JSON數(shù)據(jù)demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
react路由v6版本NavLink的兩個(gè)小坑及解決
這篇文章主要介紹了react路由v6版本NavLink的兩個(gè)小坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
最近需要使用 Hybrid 的方式開(kāi)發(fā)一 個(gè) APP,交互和原生 APP 相似并且需要 IM 通信,本文給大家介紹了使用React實(shí)現(xiàn)原生APP切換效果,文中通過(guò)代碼示例講解的非常詳細(xì),感興趣的小伙伴跟著小編一起來(lái)看看吧2025-01-01
Snake?Game?使用?ReactJS?項(xiàng)目實(shí)現(xiàn)功能組件并相應(yīng)地管理狀態(tài),開(kāi)發(fā)的游戲允許用戶使用箭頭鍵控制蛇或觸摸屏幕上顯示的按鈕來(lái)收集食物并增長(zhǎng)長(zhǎng)度,本文給大家詳細(xì)講解了如何使用?React?制作一個(gè)貪吃蛇游戲,需要的朋友可以參考下2023-11-11