欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ReactNative 引用第三方地图插件react-native-baidumap-sdk遇到的一些坑解决方法

程序员文章站 2022-04-20 11:53:17
...

引入百度地图的包首先要去百度申请AK,具体申请方式可以才考百度官方文档:http://lbsyun.baidu.com/index.php?title=androidsdk/guide/create-project/ak

安卓配置:

需要注意的是开发版本的SHA1是从电脑的全局配置文件.android获取,记得不要找错了位置。ReactNative 引用第三方地图插件react-native-baidumap-sdk遇到的一些坑解决方法

发布版本的SHA1对应你的apk发布签名。如何拿到SHA1,在百度官方文档里面有说明就一个命令:

调试版本使用指令:keytool -list -v -keystore debug.keystore
发布版本请使用指令:keytool -list -v -keystore apk 的 keystore

苹果配置:http://lbsyun.baidu.com/index.php?title=iossdk/guide/create-project/ak

ReactNative 引用第三方地图插件react-native-baidumap-sdk遇到的一些坑解决方法

现在,我们开始安装react-native-baidumap-sdk,具体的安装使用方法可以参考GitHub的react-native-baidumap-sdk官方说明:https://github.com/qiuxiang/react-native-baidumap-sdk/blob/master/docs/installation.md

引入项目

npm i react-native-baidumap-sdk

yarn add react-native-baidumap-sdk

配置

Android

react-native link react-native-baidumap-sdk

在 AndroidManifest 中添加获取 的Android 开发**

<application>
    <meta-data
      android:name="com.baidu.lbsapi.API_KEY"
      android:value="开发**" />
</application>

下面是比较需要注意的IOS添加

iOS

暂时只提供 cocoapods 配置方式,手动配置请参考官方文档。

下面的中文部分是我的踩坑记录,各位在创建Podfile的时候要记得去掉中文部分

在 ios 目录下新建文件 Podfile

创建Podfile的方法有很多,各位可以自行了解。我比较喜欢使用的命令:touch Podfile。然后open Podfile打开文件,然后把下面的命令复制进来这个Podfile

# 注意ios的版本,比较重要,这是你的项目能兼容的ios最低版本。我之前一直没办法pod install就是因为版本的问题。后续补上截图
# 注意下面命令在官网部分因为版本更新,GLog记得要改回小写的glog,不然会有报错。
# Uncomment the next line to define a global platform for your project
  platform :ios, '9.0'
# The target name is most likely the name of your project. 注意点:target ‘你的项目名称’
target 'JSBridgeTest' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!
  # Pods for NumberTileGame
  # Your 'node_modules' directory is probably in the root of your project,
  # but if not, adjust the `:path` accordingly
  pod 'React', :path => '../node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # Include this for RN >= 0.47
    'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # Needed for debugging
    'RCTAnimation', # Needed for FlatList and animations running on native UI thread
    # Add any other subspecs you want to use in your project
  ]
  # Explicitly include Yoga if you are using RN >= 0.42.0
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
# Third party deps podspec link
   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-baidumap-sdk', path: '../node_modules/react-native-baidumap-sdk/lib/ios'
  
  end

注意:不同的 RN 版本,Podfile 可能需要稍作调整,具体参考 https://facebook.github.io/react-native/docs/0.52/integration-with-existing-apps.html 。

然后运行:

pod install

如果运行pod install出现:SDK "iphoneos" cannot be located。这是因为解析xcode的路径不正确,可以参考:https://www.jianshu.com/p/c920fd0205fe

执行脚本出现下面的错误:

building arm64...
xcrun -sdk iphoneos clang is unable to create an executable file.

查找原因:

mac$ xcode-select --print-path
/Library/Developer/CommandLineTools

发现是这个Xcode路径判断错误。

mac$ xcodebuild -showsdks
xcode-select: error: tool 'xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is a command line tools instance

回想起最近安装了另外两个版本的Xcode,应该是这样导致了路径错误。

mac$ ls /Applications/Xcode
Xcode.app/ Xcode2.app/ Xcode3.app/

解决方法:给Xcode命令行工具指定路径

mac$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer/

完成后,记得要引用一下这个库。如果项目运行是出现下面几个报错,可能就是因为第三方库没有引用到的原因:

library not found for -lDoubleConversion

library not found for -lAFNetworking

我采用了一个比较粗暴的方法,在Link Binary with Libraies 中Add Others 中选择了,把这个库加了进来。

ReactNative 引用第三方地图插件react-native-baidumap-sdk遇到的一些坑解决方法

参考链接:

https://www.jianshu.com/p/381b110acbf6

https://www.cnblogs.com/includeao/p/7211233.html