开源地址:https://github.com/lovebing/react-native-baidu-map
今天在React native中导入百度地图组件遇到过许多坑,特此写一篇博客记录踩过的坑...
1、Install 安装
npm install react-native-baidu-map --save
2、在settings.gradle中添加以下内容
include ':app'
include ':react-native-baidu-map'
project(':react-native-baidu-map').projectDir = new File(settingsDir, '../node_modules/react-native-baidu-map/android')
3、在build.gradle中添加:
compile project(':react-native-baidu-map')
如下:
4、修改MainApplication.java 文件
添加:new BaiduMapPackage(getApplicationContext())
除此之外,别忘了将包导进来:不过一般都会自动导进来。
MainApplication
import org.lovebing.reactnative.baidumap.BaiduMapPackage;
5、修改AndroidMainifest.xml 文件
1)配置各种权限
2)添加com.baidu.lbsapi.API_KEY
完整文件如下:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.market">
<!-- 这个权限用于进行网络定位-->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission>
<!-- 这个权限用于访问GPS定位-->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>
<!-- 用于访问wifi网络信息,wifi信息会用于进行网络定位-->
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></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" />
<uses-permission android:name="android.permission.INTERNET" />
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:allowBackup="false"
android:theme="@style/AppTheme">
<meta-data
android:name="com.baidu.lbsapi.API_KEY"
android:value="换成你自己的apikey"/>
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
</manifest>
获得Android签名的sha1值:
第1步:运行进入控制台
第2步:定位到.android文件夹下,输入cd .android
第3步:输入keytool -list -v -keystore debug.keystore,会得到三种指纹证书,选取SHA1类型的证书(密钥口令是android),例如:
其中keytool为jdk自带工具;keystorefile为Android 签名证书文件
7、修改Demo程序
直接使用提供的Demo源文件
import BaiduMapDemo from './BaiduMapDemo';
遇到的问题:
修改BaiduMapPackage.js中的第49行 删除 @Override
在编译器目录中找不到、直接在文件中搜索该文件
然后又出现了图示的错误:
这是因为在新版React Native中proptype需要单独引入,
删除MapView.js中老版本定义的PropTypes
在MapView.js中加入:
import PropTypes from 'prop-types';
这样就完成了,分享一下运行结果:
打包成apk后,会出现地图无法显示的情况,这是因为配置的是开发版,必须要配置发布版,
配置时候运行如下命令:
keytool -v -list -keystore E:/XXX.jksXXX.jks (此处写你自己的key
配置后将生成的SHA1配置到百度地图的后台。