想使用react-native做一個(gè)地圖應(yīng)用，安裝的過(guò)程中遇到了不少問(wèn)題，這里總結(jié)一下安裝過(guò)程

初始化一個(gè)react-native項(xiàng)目 react-native init mapApp

安裝react-native-baidu-map，適用npm安裝的時(shí)候總會(huì)被莫名其妙的被刪除一下依賴包，所以使用的yarn，yarn add react-native-baidu-map --save

然后去百度地圖開發(fā)平臺(tái)申請(qǐng)ak

應(yīng)用類型選擇android SDK

填寫發(fā)布版SHA1

獲取方式：打開cmd 輸入cd .android

輸入keytool -list -v -keystore debug.keystore

獲取指紋證書中的SHA1

填寫包名

獲取方式：mapApp/android/app/src/main/AndroidManifest.xml文件中的package="com.mapapp"

填寫完畢提交

在android目錄下的settings.gradle文件下添加以下內(nèi)容

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中添加以下內(nèi)容

compile project(':react-native-baidu-map')

在android/app/src/main/java/com/mapapp/MainApplication.java文件中添加以下內(nèi)容

import org.lovebing.reactnative.baidumap.BaiduMapPackage;

List ReactPackage中添加, new BaiduMapPackage(getApplicationContext())逗號(hào)不能少

在android/app/src/main目錄下的AndroidManifest.xml文件中添加以下內(nèi)容

                            <!-- 這個(gè)權(quán)限用于進(jìn)行網(wǎng)絡(luò)定位-->
            <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission>
            <!-- 這個(gè)權(quán)限用于訪問(wèn)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>就是在百度地圖開放圖片上面申請(qǐng)的key

走到這一步基本配置已經(jīng)差不多ok了
在你的應(yīng)用中引入react-natvie-baidu-map并使用，然后運(yùn)行項(xiàng)目

這個(gè)時(shí)候應(yīng)該會(huì)報(bào)錯(cuò)，node_modules\react-native-baidu-map\android\src\main\java\org\lovebing\reactnative\baidumap\BaiduMapPackage.java:49: 錯(cuò)誤: 方法不會(huì)覆蓋或?qū)崿F(xiàn)超類型的方法

如果遇到這個(gè)錯(cuò)誤刪除掉這個(gè)路徑下的依賴文件中的@Override方法

再次運(yùn)行，這時(shí)命令行應(yīng)該不會(huì)報(bào)錯(cuò)了，但是在模擬器上應(yīng)該是一片紅色報(bào)錯(cuò)，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';
對(duì)PropTypes的引用修改為import PropTypes from 'prop-types'

再次啟動(dòng)，ok