自己测试了下,https://www.jianshu.com/p/eceb7e66fa5e?appinstall=0

记录下自己遇到的问题,以及解决方法,

首先新建一个react native项目,然后 安装 react-native-baidu-map 模块,

安装
  npm install react-native-baidu-map --save
  或者
  yarn add react-native-baidu-map

使用上面2个都是可以的

项目以及 地图组建安装好了,接下来就是配置了:

先打开.xcodeproj 文件进入xcode 配置

xcode配置:

  1. 添加 RCTBaiduMap.xcodeproj 

     把  RCTBaiduMap.xcodeproj 文件添加 到下图的 libraries 中,RCTBaiduMap.xcodeproj文件在 你项目工程目录 的 node_modules/react-native-baidu-map/ios 目录下面,

    你也可以找到该目录直接拖到 libraries 中

2. Build Phases -> Link Binary With Libraries 加入 libRCTBaiduMap.a

  或者

 General -> Linked Frameworks and Libraries   中 加入 libRCTBaiduMap.a

上面2个地方加入是一样的,下图是加好了的

3.

在 Build Settings -> Search Paths -> Framework search path  中添加  $(PROJECT_DIR)/../node_modules/react-native-baidu-map/ios/lib

在 Build Settings -> Search Paths -> Header search paths  中添加  $(SRCROOT)/../node_modules/react-native-baidu-map/ios/RCTBaiduMap

4.

  Build Phases -> Link Binary With Libraries -> + 号按钮 ->  add other -> node_modules/react-native-baidu-map/ios/lib  目录下的 framwordk 全部选中,然后添加

然后在 Build Phases -> Link Binary With Libraries -> + 号按钮   这里继续添加下面的

CoreLocation.framework
QuartzCore.framework
OpenGLES.framework
SystemConfiguration.framework
CoreGraphics.framework
Security.framework
libsqlite3.0.tbd(xcode7以前为 libsqlite3.0.dylib)
CoreTelephony.framework
libstdc++.6.0.9.tbd(xcode7以前为libstdc++.6.0.9.dylib)

例图:

5. 添加  node_modules/react-native-baidu-map/ios/lib/BaiduMapAPI_Map.framework/Resources/mapapi.bundle  下面的  mapapi.bundle 文件,添加位置如下图,可能项目名字不同文件名字不同

6.修改 AppDelegate.m  文件

  

#import "RCTBaiduMapViewManager.h" 

{
...
[RCTBaiduMapViewManager initSDK:@"api key"];//这里的api key 一定要在官网和APP的Bundle identifier对应,否则地图会显示失败
...
}

如图代码添加位置

7. build一下,看看是否配置成功

当前我遇到2个问题,记录下

(1).  报错信息 Redefinition of 'RCTMethodInfo'

  如图

  

解决办法:

find -> find in project         s搜索 RCTBridgeModule.h,  然后找到 引入它的地方

#import "RCTBridgeModule.h"
换成
#import "React/RCTBridgeModule.h"
或者换成
#import <React/RCTBridgeModule.h>

如图

  (2).报错如下图

  

解决办法

#import "RCTViewManager.h"
#import "RCTConvert+CoreLocation.h" 换成 #import <React/RCTViewManager.h>
#import <React/RCTConvert+CoreLocation.h>

如图

然后到这一步,配置就没问题,我只遇到这2个问题。

然后在  https://github.com/lovebing/react-native-baidu-map 下载 demo  ,你也可不下载,进去找到 BaiduMapDemo.js,把它的内容拷贝出来,直接放到自己的组建里面,然后引用。

在这里还会有一个问题,就是在你引入这个组建的时候,组建里面在引入  react-native-baidu-map 的时候会报错,

报错如图:

将 node_modules/react-native-baidu-map/js/MapView.js中的

import React, {
Component,
PropTypes
} from 'react'; 修改成 import React, {
Component,
} from 'react'; import PropTypes from 'prop-types';

到这里 就没在遇到问题了,模拟器上以及可以看到地图了,我的 react-native  版本是 0.50.0

注: 如果本身项目里面没得 prop-types  模块 得下载一个



react-native ios 集成 react-native-baidu-map的更多相关文章

  1. iOS 集成React Native到现有iOS应用(Ficow本人实测,Xcode 8.3,iOS 10.3)

    详细操作步骤,请 参考官方文档  或者翻译文档 ! 我补充一些必要的注意事项: 1.引入React.a文件.配置User Header Search Paths 引入React.a文件(点击+可以看到 ...

  2. React Native 轻松集成分享功能(iOS 篇)

    产品一直催我在 RN 项目中添加分享功能,一直没找到合适的库,今天让我看到了一个插件分享给大家. 在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 3 个可选的主流平台).支持的平台 ...

  3. 现有iOS项目集成React Native过程记录

    在<Mac系统下React Native环境搭建>配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用 ...

  4. iOS原生项目中集成React Native

    1.本文的前提条件是,电脑上已经安装了CocoaPods,React Native相关环境. 2.使用Xcode新建一个工程.EmbedRNMeituan [图1] 3.使用CocoaPods安装Re ...

  5. React Native 轻松集成统计功能(iOS 篇)

    最近产品让我加上数据统计功能,刚好极光官方支持数据统计 支持了 React Native 版本 第一步 安装: 在你的项目路径下执行命令: npm install janalytics-react-n ...

  6. React Native项目集成iOS原生模块

    今天学习一下怎么在React Native项目中集成iOS原生模块,道理和在iOS原生项目中集成React Native模块类似.他们的界面跳转靠的都是iOS原生的UINavigationContro ...

  7. iOS原生项目集成React Native模块

    今天周末,弄弄Native和React Native之间的交互.首先,先在iOS原生项目中集成React Native模块: 注意事项: 1.因为react native的版本问题,部分细节可能有所不 ...

  8. react native 之 在现有的iOS工程中集成react native

    在现有的iOS工程中集成react native, 或者说将react native引入到iOS 项目,是RN和iOS混合开发的必经之路 参考官网教程:https://reactnative.cn/d ...

  9. React Native 轻松集成分享功能(Android 篇)

    关于推送的集成请参考这篇文章,关于统计的集成请参考这篇文章,本篇文章将引导你集成分享功能. 在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 3 个可选的主流平台).支持的平台如下: ...

  10. React Native iOS环境搭建

    前段时间React Native for Android发布,感觉React Native会越来越多的公司开始研究.使用.所以周六也抽空搭建了iOS的开发环境,以便以后利用空闲的时间能够学习一下. 废 ...

随机推荐

  1. gitlab 10.8.1 迁移

    参考官网: https://docs.gitlab.com/ee/raketasks/backup_restore.html    Backing up and restoring GitLab 及 ...

  2. TCP/IP学习20180625-DNS

    1 DNS:domain name system域名系統把域名,轉換成IP2 最開始是一個hosts.txt,後來是數據庫,最後是分佈式數據庫3 每個名字服務器存儲一部分名字.如果有不知道的名字,就轉 ...

  3. QT中实现应用程序的单例化

    一介绍 通过编写一个QSingleApplication类,来实现Qt程序的单例化,原文的作者是在Windows Vista + Qt4.4 下实现的,不过应用在其他平台上是没问题的.(本文是我在ht ...

  4. bzoj4939: [Ynoi2016]掉进兔子洞

    将权值排序,设权值x排序后在[l,r]出现,x在区间中出现k次,则用[l,l+k-1]为1,[l+k,r]为0来表示x的出现次数 用bitset表示可重集中每个元素的出现次数,用莫队处理出询问区间对应 ...

  5. 修改最后一次 已commit 的备注

    输入命令 git commit --amend 会展示出最后一次提交的 备注信息 按 i 进行编辑 按esc 退出编辑 再按 shift +: (注意是英文的冒号),切换到命令行 wq 保存 即可 参 ...

  6. HTML5绘制饼图示例(一)

    原文地址:http://www.2cto.com/kf/201108/100251.html HTML5引入Canvas元素,用于图形的绘制,我们可以仅仅基于HTML和JavaScript就能绘制出原 ...

  7. Scrapy学习篇(四)之数据存储

    上一篇中,我们简单的实现了toscrapy网页信息的爬取,并存储到mongo,本篇文章信息看看数据的存储.这一篇主要是实现信息的存储,我们以将信息保存到文件和mongo数据库为例,学习数据的存储,依然 ...

  8. VLAN 及 GVRP 配置

    一.VLAN配置 +进入vlan视图,如果指定的vlan没有创建则先创建它 [undo]vlan vlan_id undo vlan 剔除已创建的vlan VLAN_id:要进入的或要创建并进入的VL ...

  9. springmvc前端控制器的三种拦截方式

    *.do :只拦截.do文件 / :拦截除jsp页面的所有请求,包括restful类型的url /*  :拦截所有请求包括jsp页面

  10. URL传值乱码

    JS端: &value=encodeURIComponent("value") C端: HttpUtility.UrlDecode(Request.Params[" ...