react-native ios 集成 react-native-baidu-map
自己测试了下,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 -> + 号按钮 这里继续添加下面的
例图:
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的更多相关文章
- iOS 集成React Native到现有iOS应用(Ficow本人实测,Xcode 8.3,iOS 10.3)
详细操作步骤,请 参考官方文档 或者翻译文档 ! 我补充一些必要的注意事项: 1.引入React.a文件.配置User Header Search Paths 引入React.a文件(点击+可以看到 ...
- React Native 轻松集成分享功能(iOS 篇)
产品一直催我在 RN 项目中添加分享功能,一直没找到合适的库,今天让我看到了一个插件分享给大家. 在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 3 个可选的主流平台).支持的平台 ...
- 现有iOS项目集成React Native过程记录
在<Mac系统下React Native环境搭建>配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用 ...
- iOS原生项目中集成React Native
1.本文的前提条件是,电脑上已经安装了CocoaPods,React Native相关环境. 2.使用Xcode新建一个工程.EmbedRNMeituan [图1] 3.使用CocoaPods安装Re ...
- React Native 轻松集成统计功能(iOS 篇)
最近产品让我加上数据统计功能,刚好极光官方支持数据统计 支持了 React Native 版本 第一步 安装: 在你的项目路径下执行命令: npm install janalytics-react-n ...
- React Native项目集成iOS原生模块
今天学习一下怎么在React Native项目中集成iOS原生模块,道理和在iOS原生项目中集成React Native模块类似.他们的界面跳转靠的都是iOS原生的UINavigationContro ...
- iOS原生项目集成React Native模块
今天周末,弄弄Native和React Native之间的交互.首先,先在iOS原生项目中集成React Native模块: 注意事项: 1.因为react native的版本问题,部分细节可能有所不 ...
- react native 之 在现有的iOS工程中集成react native
在现有的iOS工程中集成react native, 或者说将react native引入到iOS 项目,是RN和iOS混合开发的必经之路 参考官网教程:https://reactnative.cn/d ...
- React Native 轻松集成分享功能(Android 篇)
关于推送的集成请参考这篇文章,关于统计的集成请参考这篇文章,本篇文章将引导你集成分享功能. 在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 3 个可选的主流平台).支持的平台如下: ...
- React Native iOS环境搭建
前段时间React Native for Android发布,感觉React Native会越来越多的公司开始研究.使用.所以周六也抽空搭建了iOS的开发环境,以便以后利用空闲的时间能够学习一下. 废 ...
随机推荐
- gitlab 10.8.1 迁移
参考官网: https://docs.gitlab.com/ee/raketasks/backup_restore.html Backing up and restoring GitLab 及 ...
- TCP/IP学习20180625-DNS
1 DNS:domain name system域名系統把域名,轉換成IP2 最開始是一個hosts.txt,後來是數據庫,最後是分佈式數據庫3 每個名字服務器存儲一部分名字.如果有不知道的名字,就轉 ...
- QT中实现应用程序的单例化
一介绍 通过编写一个QSingleApplication类,来实现Qt程序的单例化,原文的作者是在Windows Vista + Qt4.4 下实现的,不过应用在其他平台上是没问题的.(本文是我在ht ...
- bzoj4939: [Ynoi2016]掉进兔子洞
将权值排序,设权值x排序后在[l,r]出现,x在区间中出现k次,则用[l,l+k-1]为1,[l+k,r]为0来表示x的出现次数 用bitset表示可重集中每个元素的出现次数,用莫队处理出询问区间对应 ...
- 修改最后一次 已commit 的备注
输入命令 git commit --amend 会展示出最后一次提交的 备注信息 按 i 进行编辑 按esc 退出编辑 再按 shift +: (注意是英文的冒号),切换到命令行 wq 保存 即可 参 ...
- HTML5绘制饼图示例(一)
原文地址:http://www.2cto.com/kf/201108/100251.html HTML5引入Canvas元素,用于图形的绘制,我们可以仅仅基于HTML和JavaScript就能绘制出原 ...
- Scrapy学习篇(四)之数据存储
上一篇中,我们简单的实现了toscrapy网页信息的爬取,并存储到mongo,本篇文章信息看看数据的存储.这一篇主要是实现信息的存储,我们以将信息保存到文件和mongo数据库为例,学习数据的存储,依然 ...
- VLAN 及 GVRP 配置
一.VLAN配置 +进入vlan视图,如果指定的vlan没有创建则先创建它 [undo]vlan vlan_id undo vlan 剔除已创建的vlan VLAN_id:要进入的或要创建并进入的VL ...
- springmvc前端控制器的三种拦截方式
*.do :只拦截.do文件 / :拦截除jsp页面的所有请求,包括restful类型的url /* :拦截所有请求包括jsp页面
- URL传值乱码
JS端: &value=encodeURIComponent("value") C端: HttpUtility.UrlDecode(Request.Params[" ...