react-native-baidu-map的配置实践

想使用react-native做一个地图应用,安装的过程中遇到了不少问题,这里总结一下安装过程

初始化一个react-native项目 react-native init mapApp

安装react-native-baidu-map,适用npm安装的时候总会被莫名其妙的被删除一下依赖包,所以使用的yarn,yarn add react-native-baidu-map --save

然后去百度地图开发平台申请ak

应用类型选择android SDK

填写发布版SHA1

获取方式:打开cmd 输入cd .android

输入keytool -list -v -keystore debug.keystore

获取指纹证书中的SHA1

填写包名

获取方式:mapApp/android/app/src/main/AndroidManifest.xml文件中的package="com.mapapp"

填写完毕提交

在android目录下的settings.gradle文件下添加以下内容

include ':react-native-baidu-map'

project(':react-native-baidu-map').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-baidu-map/android')

在android/app目录下的build.gradle文件下dependencies中添加以下内容

compile project(':react-native-baidu-map')

在android/app/src/main/java/com/mapapp/MainApplication.java文件中添加以下内容

import org.lovebing.reactnative.baidumap.BaiduMapPackage;

List ReactPackage中添加, new BaiduMapPackage(getApplicationContext())逗号不能少

在android/app/src/main目录下的AndroidManifest.xml文件中添加以下内容

                            
            
            
                          
            
            
            
            
            
            
            
            
            
            
            
              
                ep76v15zBgBFPch30RAsYl3PihzIlTh4
就是在百度地图开放图片上面申请的key

走到这一步基本配置已经差不多ok了
在你的应用中引入react-natvie-baidu-map并使用,然后运行项目

这个时候应该会报错,node_modules\react-native-baidu-map\android\src\main\java\org\lovebing\reactnative\baidumap\BaiduMapPackage.java:49: 错误: 方法不会覆盖或实现超类型的方法

如果遇到这个错误删除掉这个路径下的依赖文件中的@Override方法

再次运行,这时命令行应该不会报错了,但是在模拟器上应该是一片红色报错,react-native-baidu-map undefined is not an object(evaluting 'a.PropTypes.bool')

将node_modules\react-native-baidu-map\js\MapView.js中的import React, {
Component,
PropTypes
} from 'react';
对PropTypes的引用修改为import PropTypes from 'prop-types'

再次启动,ok

你可能感兴趣的:(react-native-baidu-map的配置实践)