1、申请秘钥
创建应用.png
应用名称:随意
发布版SHA1,找到my-release-key.keystore文件目录
keytool -list -v -keystore my-release-key.keystore
包名:
image.png
2、安装
npm install react-native-baidu-map --save
react-native link react-native-baidu-map
检查link
android/app/build.gradle
compile project(':react-native-baidu-map')
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')
MainApplication.java
import org.lovebing.reactnative.baidumap.BaiduMapPackage;
@Override
protected List getPackages() {
return Arrays.asList(
new BaiduMapPackage(getApplicationContext())
);
}
AndroidManifest.xml (权限这里一定注意,否则地图只会显示网格)
3、构建
引入
import {
MapView,
MapTypes,
Geolocation
} from 'react-native-baidu-map';
state = {
mayType: MapTypes.NORMAL,
zoom: 15,
center: {
longitude: 113.981718,
latitude: 22.542449
},
trafficEnabled: false,
baiduHeatMapEnabled: false,
markers: []
};
componentDidMount() { // 获取位置
Geolocation.getCurrentPosition().then(
(data) => {
this.setState({
zoom: 18,
markers: [{
latitude: data.latitude,
longitude: data.longitude,
title: '我的位置'
}],
center: {
latitude: data.latitude,
longitude: data.longitude
}
})
}
).catch(error => {
console.warn(error, 'error')
})
}
onMarkerClick={(e) => {
console.warn(JSON.stringify(e));
}}
onMapClick={(e) => {
}}>
可能遇到的问题:
Cannot read property 'bool' of undefined
// 解决办法
//修改node_modules\react-native-baidu-map/js/MapView.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';
// 错误:方法不会覆盖或实现超类型的方法
// 解决办法:node_modules\react-native-baidu-map/android../BaiduMapPackage.java中createJSModules方法的@Override干掉
真机、模拟器可能只显示网格,打包应该是就可以了的
显示结果.png