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 //将高德地图插件关联你的项目
4，配置秘钥：
5，在js 文件中导入地图模块
6,设置地图状态
所谓的地图状态包括：中心坐标（coordinate）、缩放级别（zoomLevel）、倾斜度（titl）、旋转角度（rotation）、显示区域（region）、地图模式（mapType）。目前高德地图支持5种地图模式：
标准（standard）
卫星（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， 执行pod命令
pod install --verbose --no-repo-update(后面的参数：省略升级CocoaPods的spec仓库，加速安装而已)
可能会遇到错误：
1. 本地ReactCommon中是Yoga 而这里是yoga 跟自己本地不一致以及其他相似问题
2. 路径错误： 之前react-native-amap3d有的版本中 ios/android文件夹直接在react-native- amap3d文件夹中 不在lib中 根据本地实际情况安装。
11，打开Xcode进行IOS配置（打开的是你项目中IOS文件夹下一个后缀名为xcworkspace的文件, 之后运行项目也是运行这个文件，不要在运行之前项目的xcodeproj文件的了。）
1. 删除Libraries中的Amap3D.xcodeproj文件
2. 选中项目名称->选择Build Phases->Link Binary With Libraries中生成的amap3d.a文件 没有不删除
3. 可能Search Path 或 Header 里面还有相关配置也干掉，不过我的没有。
这样就能把之前link的内容干掉了。
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标签内添加
<meta-data android:name="com.amap.api.v2.apikey" android:value="your key" />
16. 根据react-native-amap3d库的文档添加一个地图页面 注意样式
17. 在Xcode中开始运行模拟器吧，可能会碰到以下问题：
1.debugger模式下没有提示错误但是不显示地图： sdk key 没有配置对 或者 你的样式有问题
2.Xcode Build的时候报错 或者 直接运行的时候报错
哪个Libraries中的库报错 删除哪个库里面的 类似 *-tvOs.a文件
3. folly/folly-config.h file not found
