react-native 百度地图(Android)

附地址：https://github.com/lovebing/react-native-baidu-map

1、申请秘钥

地址：http://lbsyun.baidu.com/apiconsole/key

创建应用.png

应用名称：随意

发布版SHA1，找到my-release-key.keystore文件目录

keytool -list -v -keystore my-release-key.keystore

附签署应用： https://reactnative.cn/docs/0.51/signed-apk-android.html#content

包名：

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')
        })
    }

 {
              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