react-native android 集成 react-native-baidu-map

記錄下 遇到的問題，方便之後查看，參考 文章 https://www.jianshu.com/p/7ca4d7acb6d2

1.

npm install react-native-baidu-map --save   //安裝

react-native link react-native-baidu-map  //鏈接

2.配置 ---  自動連接 有些地方能連接上，有的地方連接不上則須要手動加上

參考下面配置，若是有了就不用修改，若是不一樣則須要修改

（1).  android/setting.gradle

　　

include ':react-native-baidu-map'
project(':react-native-baidu-map').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-baidu-map/android')

　(2).  android/app/build.gradle　

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

(3).  android/app/src/main/java/../MainApplication.java

import org.lovebing.reactnative.baidumap.BaiduMapPackage;


new BaiduMapPackage(getApplicationContext())  //這一步 link 完了 括號裏面是沒有 getApplicationContext() 這個的，要加上 ，否則會報錯

（4).  android/app/src/main/AndroidMainifest.xml

　　開啓權限：

　　

    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <!-- 網絡定位-->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <!-- 用於訪問wifi網絡信息，wifi信息會用於進行網絡定位-->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />

 

配置百度地圖key：

 <meta-data
    android:name="com.baidu.lbsapi.API_KEY"
    android:value="百度地圖的key"/>

注意 百度地圖的key 申請的時候 android  包名 和  ios 的安全碼，要和你的包名一致，否則地圖是顯示的網格

 

錯誤一：

還有 遇到一個錯誤 記錄下，差點忘記，如圖：

解決辦法，就是找到 這個路徑下的java 文件 去掉 

@Override

 

路徑我就不寫，上圖圈的有

如圖：

錯誤二：

在這裏還會有一個問題，就是在你引入這個組建的時候，組建裏面在引入  react-native-baidu-map 的時候會報錯，

 

解決辦法：

將 node_modules/react-native-baidu-map/js/MapView.js中的

import React, {
  Component,
  PropTypes
} from 'react';

修改爲

import React, {
  Component,
} from 'react';

import PropTypes from 'prop-types';

如圖：

 

注： 若是自己項目裏面沒得 prop-types  模塊 得下載一個

 

這個問題 若是不處理是 android  和 ios 都會出現的，處理一次就不會報錯了，ios 那邊我已經記錄了，可是想了想仍是記錄下，萬一是先看的android呢

 

而後其餘問題 應該沒有，之後遇到了在補充，就是注意下複製的時候注意下標點 ，是否是中文的

個人 react-native  版本是 0.50.0