想使用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文件中添加以下内容
<!-- 这个权限用于进行网络定位-->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission>
<!-- 这个权限用于访问GPS定位-->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" />
<uses-permission android:name="android.permission.WAKE_LOCK"/>
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_SETTINGS" />
<meta-data
android:name="com.baidu.lbsapi.API_KEY"
android:value="ep76v15zBgBFPch30RAsYl3PihzIlTh4"/>
ep76v15zBgBFPch30RAsYl3PihzIlTh4</br>就是在百度地图开放图片上面申请的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