react-native-amap3d三方库安装

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),有错误及时指出。

你可能感兴趣的:(react-native-amap3d三方库安装)