RN集成react-native-baidu-map及解决遇到的问题

创建一个React-native项目,并加入百度地图的插件的方法:

1,react-native init --version="0.55.4" BaiduMapDemo  //新建一个目录,创建名为 BaiduMapDemo 的项目,

出现如图所示:

2,cd BaiduMapDemo //进入BaiduMapDemo 下

3,yarn add react-native-baidu-map 或者 npm install react-native-baidu-map--save 添加react-native-baidu-map插件 (安装开源项目库)

4,配置index.js


APP是默认的项目名称,这里创建项目时,项目名称是BaiduMapDemo,

5,setting.gradle中添加:

include':react-native-baidu-map'project(':react-native-baidu-map').projectDir =newFile(settingsDir,'../node_modules/react-native-baidu-map/android')


6,app/build.gradle的dependencies中添加


7,MainApplication.java中添加:


8,在AndroidMainifest.xml中添加,注意:权限不要重复添加,react-native编译有时不通过。


9,application标签内添加


10,然后,编译一下,发现项目中会出现react-native-baidu-map模块,会报错,

然后解决问题:

1,createJSModules不是重写方法

2,WebView的修改:

原始的,错误的


从React15.5起,React.PropTypes被移入到单独的package中。react提供了一个package(prop-types)去检查props的类型。首先需要将prop-types引用到文件中。

更改项目中对组件原的引用方式,在此项目中需要在node_modules\react-native-baidu-map\js\MapView.js文件中

3, 项目能运行,地图不显示。

主要因为keystore和及其配置。

把keystore拷贝到 项目\android\keystores目录下,

并在 项目\android\app\build.gradle中配置

(4) 提示MainActivity不存在 Activity is not exist

项目\android\app\src\main\AndroidManifest.xml中的 package

与 项目\android\app\build.gradle中的applicationId保持一致。

然后就饿没有问题了,百度地图的API_KEY自己生成添加进项目的Application中就行了.

你可能感兴趣的:(RN集成react-native-baidu-map及解决遇到的问题)