react-native-amap3d(0.12.0) 安装心得 version(RN:0.54.4)
1. 安装
npm install react-native-amap3d
2. link
react-native link react-native-amap3d
PS:三方库作者提示大家不要直接link 因为IOS会报错 我这里直接link是为了自动在android里面配置文件生成相关配置 不用自己一点点再去配置了。
3. 安装pod
推荐:http://www.code4app.com/article/cocoapods-install-usage 或者自己百度去安装也行
4. 在项目文件夹中的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 相关具体原因 问群里大神去。哈哈~
5. 执行pod命令
pod install --verbose --no-repo-update(后面的参数:省略升级CocoaPods的spec仓库,加速安装而已)
可能会遇到错误:
1. 本地ReactCommon中是Yoga 而这里是yoga 跟自己本地不一致以及其他相似问题
2. 路径错误: 之前react-native-amap3d有的版本中 ios/android文件夹直接在react-native-amap3d文件夹中 不在lib中 根据本地实际情况安装。
6. 打开Xcode进行IOS配置(打开的是你项目中IOS文件夹下一个后缀名为xcworkspace的文件, 之后运行项目也是运行这个文件,不要在运行之前项目的xcodeproj文件的了。)
1. 删除Libraries中的Amap3D.xcodeproj文件
2. 选中项目名称->选择Build Phases->Link Binary With Libraries中生成的amap3d.a文件 没有不删除
3. 可能Search Path 或 Header 里面还有相关配置也干掉,不过我的没有。
这样就能把之前link的内容干掉了。
7. Xcode中找到Info.plist文件
在App Transport Security Settings中 添加 Allow Arbitrary Loads 对应值 YES
8. 获取IOS和Android SDK Key: http://lbs.amap.com/api/android-sdk/guide/create-project/get-key
9. IOSAppDelegate.m中配置
添加 #import
以及配置你的key: [AMapServices sharedServices].apiKey = @"your key";
10. 配置android的key
在android/app/src/main/AndroidManifest.xml中application标签内添加
11. 根据react-native-amap3d库的文档添加一个地图页面 注意样式
12. 在Xcode中开始运行模拟器吧,可能会碰到以下问题:
1.debugger模式下没有提示错误但是不显示地图: sdk key 没有配置对 或者 你的样式有问题
2.Xcode Build的时候报错 或者 直接运行的时候报错
哪个Libraries中的库报错 删除哪个库里面的 类似 *-tvOs.a文件
3. folly/folly-config.h file not found
参考:https://github.com/facebook/react-native/issues/18683
可能写的比较粗糙,有问题及时沟通(加群:397885169 @上海-yexun),有错误及时指出。