reactnative?集成高德地圖(react-native-amap3d)?
react-native-amap3d三方庫安裝
2018-10-09
1，react-native init --version="0.55.4" AmapDemo,//新建項目
? ? 然后用AS打開配置一下，配置一下gradle，如果在已有的RN項目上添加高德地圖插件，不需此步.
2,進入你的項目的根目錄下：如果是AmapDemo,
cd AmapDemo;??
npm i react-native-amap3d 或者?npm install react-native-amap3d //安裝高德地圖插件
我的項目名稱是是BaiduMapDemo：
3，?react-native link? react-native-amap3d //將高德地圖插件關聯(lián)你的項目
4，配置秘鑰：
5，在js 文件中導入地圖模塊
6,設置地圖狀態(tài)
所謂的地圖狀態(tài)包括：中心坐標（coordinate）、縮放級別（zoomLevel）、傾斜度（titl）、旋轉(zhuǎn)角度（rotation）、顯示區(qū)域（region）、地圖模式（mapType）。目前高德地圖支持5種地圖模式：
標準（standard）
衛(wèi)星（satellite）
導航（navigation）
公交（bus）
夜間（night）
7，定位
以下是關于IOS的配置
? ??8，安裝pod?推薦：http://www.code4app.com/article/cocoapods-install-usage? 或者自己百度去安裝也行
????9，在項目文件夾中的IOS文件夾中配置pod文件
生成pod文件：http://lbsyun.baidu.com/index.php?title=iossdk/guide/create-project/cocoapods
配置如下：
? ? platform :ios, '8.0'
? ? ? ? target 'yourObjectName' do
? ? ? ? pod 'yoga', path: '../node_modules/react-native/ReactCommon/yoga/'
? ? ? ? pod 'React', path: '../node_modules/react-native/', :subspecs => [
? ? ? ? ? ? 'DevSupport',
? ? ? ? ? ? 'CxxBridge',
? ? ? ? ? ? 'RCTNetwork',
? ? ? ? ]
? ? ? ? pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
? ? ? ? pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
? ? ? ? pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
? ? ? ? pod 'react-native-amap3d', path: '../node_modules/react-native-amap3d/lib/ios/'
? ? end
? ? PS：? 為什么加這兩個？ 'CxxBridge','RCTNetwork',
CxxBridge 好像因為版本的問題 之前RN版本升級過程中導致的，RCTNetwork 好像xcode7 之后的bug 相關具體原因
10，?執(zhí)行pod命令
pod install --verbose --no-repo-update(后面的參數(shù)：省略升級CocoaPods的spec倉庫，加速安裝而已)
可能會遇到錯誤：
? ? ?1. 本地ReactCommon中是Yoga 而這里是yoga 跟自己本地不一致以及其他相似問題
? ? ? 2. 路徑錯誤： 之前react-native-amap3d有的版本中 ios/android文件夾直接在react-native-? amap3d文件夾中 不在lib中 根據(jù)本地實際情況安裝。
11，打開Xcode進行IOS配置（打開的是你項目中IOS文件夾下一個后綴名為xcworkspace的文件, 之后運行項目也是運行這個文件，不要在運行之前項目的xcodeproj文件的了。）
?? 1. 刪除Libraries中的Amap3D.xcodeproj文件
?? 2. 選中項目名稱->選擇Build Phases->Link Binary With Libraries中生成的amap3d.a文件 沒有不刪除
?? 3. 可能Search Path 或 Header 里面還有相關配置也干掉，不過我的沒有。
?? 這樣就能把之前l(fā)ink的內(nèi)容干掉了。
12. Xcode中找到Info.plist文件?
在App Transport Security Settings中 添加 Allow Arbitrary Loads? 對應值 YES
13. 獲取IOS和Android SDK Key： http://lbs.amap.com/api/android-sdk/guide/create-project/get-key
14. IOSAppDelegate.m中配置
添加 #import <AMapFoundationKit/AMapFoundationKit.h>
?以及配置你的key： [AMapServices sharedServices].apiKey = @"your key";
15. 配置android的key?
在android/app/src/main/AndroidManifest.xml中application標簽內(nèi)添加
<meta-data?android:name="com.amap.api.v2.apikey"??android:value="your key" />
16. 根據(jù)react-native-amap3d庫的文檔添加一個地圖頁面 注意樣式
17. 在Xcode中開始運行模擬器吧，可能會碰到以下問題：
? ? 1.debugger模式下沒有提示錯誤但是不顯示地圖：? sdk key 沒有配置對 或者 你的樣式有問題
? ? 2.Xcode Build的時候報錯 或者 直接運行的時候報錯
? ? ? 哪個Libraries中的庫報錯 刪除哪個庫里面的 類似 *-tvOs.a文件
? ? 3. folly/folly-config.h file not found
