react-native android 集成 react-native-baidu-map
记录下 遇到的问题,方便以后查看,参考 文章 https://www.jianshu.com/p/7ca4d7acb6d2
1.
npm install react-native-baidu-map --save //安装 react-native link react-native-baidu-map //连接
2.配置 --- 自动链接 有些地方能链接上,有的地方链接不上则需要手动加上
参考下面配置,如果有了就不用修改,如果不同则需要修改
(1). android/setting.gradle
include ':react-native-baidu-map'
project(':react-native-baidu-map').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-baidu-map/android')

(2). android/app/build.gradle
compile project(':react-native-baidu-map')

(3). android/app/src/main/java/../MainApplication.java
import org.lovebing.reactnative.baidumap.BaiduMapPackage; new BaiduMapPackage(getApplicationContext()) //这一步 link 完了 括号里面是没有 getApplicationContext() 这个的,要加上 ,不然会报错

(4). android/app/src/main/AndroidMainifest.xml
开启权限:
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<!-- 网络定位-->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<!-- 用于访问wifi网络信息,wifi信息会用于进行网络定位-->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
配置百度地图key:
<meta-data
android:name="com.baidu.lbsapi.API_KEY"
android:value="百度地图的key"/>
注意 百度地图的key 申请的时候 android 包名 和 ios 的安全码,要和你的包名一致,不然地图是显示的网格
错误一:
还有 遇到一个错误 记录下,差点忘记,如图:

解决办法,就是找到 这个路径下的java 文件 去掉
@Override
路径我就不写,上图圈的有
如图:

错误二:
在这里还会有一个问题,就是在你引入这个组建的时候,组建里面在引入 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';
如图:

注: 如果本身项目里面没得 prop-types 模块 得下载一个
这个问题 如果不处理是 android 和 ios 都会出现的,处理一次就不会报错了,ios 那边我已经记录了,但是想了想还是记录下,万一是先看的android呢
然后其他问题 应该没有,以后遇到了在补充,就是注意下复制的时候注意下标点 ,是不是中文的
我的 react-native 版本是 0.50.0
react-native android 集成 react-native-baidu-map的更多相关文章
- React Native & Android & iOS
React Native & Android & iOS React Native & Android & iOS https://facebook.github.io ...
- React Native 轻松集成分享功能(Android 篇)
关于推送的集成请参考这篇文章,关于统计的集成请参考这篇文章,本篇文章将引导你集成分享功能. 在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 3 个可选的主流平台).支持的平台如下: ...
- React Native 轻松集成统计功能(Android 篇)
关于推送的集成请参考这篇文章,本篇文章将引导你集成统计功能,只需要简单的三个步骤就可以集成统计功能. 第一步 安装 在你的项目路径下执行命令: npm install janalytics-react ...
- Android Studio 项目中集成百度地图SDK报Native method not found: com.baidu.platform.comjni.map.commonmemcache.JNICommonMemCache.Create:()I错误
Android Studio 项目中集成百度地图SDK报以下错误: java.lang.UnsatisfiedLinkError: Native method not found: com.baidu ...
- iOS原生项目中集成React Native
1.本文的前提条件是,电脑上已经安装了CocoaPods,React Native相关环境. 2.使用Xcode新建一个工程.EmbedRNMeituan [图1] 3.使用CocoaPods安装Re ...
- react-native —— 在Mac上配置React Native Android开发环境排坑总结
配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ S ...
- React Native 轻松集成分享功能(iOS 篇)
产品一直催我在 RN 项目中添加分享功能,一直没找到合适的库,今天让我看到了一个插件分享给大家. 在集成插件之前,需要在各大开放平台上成功注册应用,并通过审核(支持 3 个可选的主流平台).支持的平台 ...
- React Native Android 环境搭建
因为工作需要,最近正在学习React Native Android.温故而知新,把学习的内容记录下来巩固一下知识,也给有需要的人一些帮助. 需要说明的是,我刚接触React Native也不久,对它的 ...
- 现有iOS项目集成React Native过程记录
在<Mac系统下React Native环境搭建>配置了RN的开发环境,然后,本文记录在现有iOS项目集成React Native的过程,官方推荐使用Cocoapods,项目一开始也是使用 ...
- react-native —— 在Windows下搭建React Native Android开发环境
在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...
随机推荐
- pyqt4 利用信号槽在子线程里面操作Qt界面
转载:ABigCaiBird #-*- coding:utf-8 -*- ####### from PyQt4.QtCore import * from PyQt4.QtGui import * im ...
- Hadoop概念学习系列之为什么hadoop/spark执行作业时,输出路径必须要不存在?(三十九)
很多人只会,但没深入体会和想为什么要这样? 拿Hadoop来说,当然,spark也一样的道理. 输出路径由Hadoop自己创建,实际的结果文件遵守part-nnnn的约定. 如何指定一个已有目录作为H ...
- print 输出到文件
content = """We have seen thee, queen of cheese, Lying quietly at your ease, Gently f ...
- flume使用之httpSource
flume自带很长多的source,如:exe.kafka...其中有一个非常简单的source——httpsource,使用httpSource,flume启动后会拉起一个web服务来监听指定的ip ...
- PHP7.1扩展开发入门
第1步: 首先从官网下载了PHP源码http://am1.php.net/distributions/php-7.1.3.tar.bz2 第2步: 解压后可以看到根目录下面的ext文件夹里有ext_s ...
- PowerDesigner最基础的使用方法入门学习(二)
1. 生成sql脚本 Database→Generate Database 选择要输出的文件路径,即文件存储路径,并根据需要修改文件名,单击确定后便会生成sql脚本. 在Options选项卡里,可以 ...
- pos省纸的妙招
- android设置系统横屏方案
效果如下: 实现方案: 1.ChangeOrientationService.java /** * @描述 强制旋转屏幕服务 * @作者 tll * @时间 2018/1/5 */ public cl ...
- U3D学习07-插值运算(位移与旋转)
1.Lerp 线性插值计算.匀速移动 2.LerpAngle 线性插值计算.匀速旋转 3.MoveTowards 4.MoveTowardsAngel 5.SmoothStep非匀速移动 6.S ...
- 猴哥来了-游戏开发记录17-微信排行榜bug
上线后排行榜bug 1.排序算法 const dataSorter = (gameDatas, field = Consts.OpenDataKeys.LevelKey) => { let d ...