记录下 遇到的问题,方便以后查看,参考 文章 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的更多相关文章

  1. React Native & Android & iOS

    React Native & Android & iOS React Native & Android & iOS https://facebook.github.io ...

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

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

  3. React Native 轻松集成统计功能(Android 篇)

    关于推送的集成请参考这篇文章,本篇文章将引导你集成统计功能,只需要简单的三个步骤就可以集成统计功能. 第一步 安装 在你的项目路径下执行命令: npm install janalytics-react ...

  4. 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 ...

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

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

  6. react-native —— 在Mac上配置React Native Android开发环境排坑总结

    配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ S ...

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

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

  8. React Native Android 环境搭建

    因为工作需要,最近正在学习React Native Android.温故而知新,把学习的内容记录下来巩固一下知识,也给有需要的人一些帮助. 需要说明的是,我刚接触React Native也不久,对它的 ...

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

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

  10. react-native —— 在Windows下搭建React Native Android开发环境

    在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...

随机推荐

  1. [UE4]保存玩家列表

    “Cast to”可以转换为“纯函数”

  2. vue 父组件主动获取子组件的数据和方法 子组件主动获取父组件的数据和方法

    Header.vue <template> <div> <h2>我是头部组件</h2> <button @click="getParen ...

  3. C# 知识特性 Attribute,XMLSerialize,

    C#知识--获取特性 Attribute 特性提供功能强大的方法,用以将元数据或声明信息与代码(程序集.类型.方法.属性等)相关联.特性与程序实体关联后,可在运行时使用“反射”查询特性,获取特性集合方 ...

  4. 第8章 传输层(2)_UDP协议

    2. 用户数据报协议(UDP) 2.1 UDP的特点 (1)UDP是无连接的,即发送数据之前不需要建立连接,因此减少了开销和发送数据之前的时延. (2)UDP使用了尽最大努力交付,即不保证可靠交付,因 ...

  5. kafka producer实例

    1. 定义要发送的消息User POJO package lenmom.kafkaproducer; public class User { public String name; public in ...

  6. tips:Java基本数据类型大小比较

    tips:Java基本数据类型大小比较! Java语言提供了八种基本类型.六种数字类型(四个整数型,两个浮点型),一种字符类型,还有一种布尔型. ------四个整数型------ (1)byte:b ...

  7. tp5生成小程序推广二维码

    //获取用户经销商信息 及生成推广二维码 public function qrcode() { //拿到openid 查找用户表内是否有该用户 没有则拒绝生成二维码 有则查看是否已生成二维码 有生成则 ...

  8. Java - 23 Java 抽象类

    Java 抽象类 在面向对象的概念中,所有的对象都是通过类来描绘的,但是反过来,并不是所有的类都是用来描绘对象的,如果一个类中没有包含足够的信息来描绘一个具体的对象,这样的类就是抽象类. 抽象类除了不 ...

  9. TextView右上角显示小红点,小红点根据TextView的长度移动,小红点被TextView挤出去不显示的问题;

    大概就是图片这个样,这个功能很常见,本来我以为很简单,谁知道真的很简单: 遇到点小问题,记录一下,哈哈: 小红点的Drawable: <?xml version="1.0" ...

  10. 使用Handlerf发送消息或使用Handler轮询时,报错IllegalStateException:This message is already in use.;

    java.lang.IllegalStateException: { when=-107ms what=9 obj=com.saicmaxus.maxuslife.model.CarInfo@be47 ...