附地址：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<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(       
          new BaiduMapPackage(getApplicationContext())       
      );
}

AndroidManifest.xml (权限这里一定注意，否则地图只会显示网格)

    <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="android.permission.ACCESS_COARSE_LOCATION"/>
    <!-- 这个权限用于访问GPS定位-->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <!-- 用于访问wifi网络信息，wifi信息会用于进行网络定位-->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>

    <!-- 放在application下面-->
    <meta-data android:name="com.baidu.lbsapi.API_KEY" android:value="刚申请的秘钥"/> 

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

<MapView trafficEnabled={this.state.trafficEnabled} baiduHeatMapEnabled={this.state.baiduHeatMapEnabled} zoom={this.state.zoom} mapType={this.state.mapType} center={this.state.center marker={this.state.marker} markers={this.state.markers} style={{height:400}}
          onMarkerClick={(e) => {
              console.warn(JSON.stringify(e));
          }}
          onMapClick={(e) => {
          }}>
</MapView>

可能遇到的问题：

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