react-native 實現百度地圖(ios&Android)

最近公司需要在app上使用地圖元件載入地圖，從網上找了很多第三方都不是很理想，總會有ios和Android不相容的問題，後來在GitHub上看到了react-native-baidu-map，覺得可以一試，雖然GitHub上有配置說明，但在過程中遇到許多坑，寫篇文章記錄一下，免得忘記。

準備工作

先說明一下，我使用的react-native開發工具是webStorm，同時我們需要你的電腦上裝有Android studio和Xcode，這樣方便我們配置後面的一些東西。android我使用的是真機來執行，而ios直接使用模擬器執行，至於mac上怎麼使用Android真機執行程式，我想也不用贅述了。
好了，下面正式開始我們的專案。

1.建立專案

首先開啟終端，在相應的目錄下輸入命令建立新專案，

react-native init BaiDuMapDemo

專案建立完成，進入專案根目錄下輸入

npm install react-native-baidu-map --save

開啟網址：https://github.com/lovebing/react-native-baidu-map
下載demo，如果你有git，你也可以直接使用命令下載demo：

git clone https://github.com/lovebing/react-native-baidu-map.git

demo下載完成，將demo中的BaiduMapDemo.js檔案直接拷貝到新建專案的根目錄下，使用webStorm開啟新建的專案，修改index.android.js和index.ios.js檔案。

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} from 'react-native';
import BaiduMapDemo from './BaiduMapDemo'

export default class BaiDuMapDemo extends Component {
  render() {
    return (
      <BaiduMapDemo/>
    );
  }
}

AppRegistry.registerComponent('BaiDuMapDemo', () => BaiDuMapDemo);

2.Android執行

(1)在settings.gradle中新增以下內容

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

(2)在build.gradle中新增：

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

(3) 修改MainApplication.Java 檔案

新增：new BaiduMapPackage(getApplicationContext())
例如：

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      new BaiduMapPackage(getApplicationContext())
  );
}

(4) 修改AndroidMainifest.xml 檔案

此檔案有2處需要配置：
1）配置各種許可權
2）新增com.baidu.lbsapi.API_KEY
完整許可權配置：

    <!-- 這個許可權用於進行網路定位-->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission>
    <!-- 這個許可權用於訪問GPS定位-->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>
    <!-- 用於訪問wifi網路資訊，wifi資訊會用於進行網路定位-->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></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" />

    <uses-sdk
        android:minSdkVersion="16"
        android:targetSdkVersion="22" />

    <application
      android:name=".MainApplication"
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">

        <meta-data
            android:name="com.baidu.lbsapi.API_KEY"
            android:value="3Hk70Z0e6N3hDRQZwuLFAlgLqB5B4ak7"/>

注意：API_key需要自己去百度地圖API申請！

(5)執行

使用命令執行專案：

npm install
react-native run-android

按道理說這樣配置完成專案就已經能跑了，但是手機卻出錯了

百度了一下找到了解決方案：http://www.open-open.com/lib/view/open1477469117948.html
然後執行成功啦_上效果圖

2.IOS執行

(1)開啟檔案

使用Xcode開啟新建專案中ios目錄中的BaiDuMapDemo.xcodeproj檔案

(2)配置

1）Project navigator->Libraries->Add Files to 選擇BaiDuMapDemo/node_modules/react-native-baidu-map/ios/RCTBaiduMap.xcodeproj

2）Project navigator->Build Phases->Link Binary With Libraries 加入 libRCTBaiduMap.a

3）新增BaiDuMapDemo/node_modules/react-native-baidu-map/ios/lib，並在Project navigator->Build Settings->Search Paths， Framework search paths 新增路徑xxx/BaiDuMapDemo/node_modules/react-native-baidu-map/ios/lib，Header search paths 新增 xxx/BaiDuMapDemo/node_modules/react-native-baidu-map/ios/RCTBaiduMap

4）新增依賴, react-native-baidu-map/ios/lib 下的全部 framwordk(上一步拷貝lib時這些已經自動新增，可省略)， CoreLocation.framework和QuartzCore.framework、OpenGLES.framework、SystemConfiguration.framework、CoreGraphics.framework、Security.framework、libsqlite3.0.tbd（xcode7以前為 libsqlite3.0.dylib）、CoreTelephony.framework 、libstdc++.6.0.9.tbd（xcode7以前為libstdc++.6.0.9.dylib）

5）新增 BaiduMapAPI_Map.framework/Resources/mapapi.bundle

6）AppDelegate.m init 初始化

#import "RCTBaiduMapViewManager.h"
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    ...
    [RCTBaiduMapViewManager initSDK:@"api key"];
    ...
}

注意：api key也要替換成自己申請的key

7）編譯執行
上效果圖~

注意：在配置iOS時會有很多坑，我配置時出現了duplicate symbols for architecture x86_64錯誤，百度後發現是重複匯入RCTBaiduMap資料夾導致的，將資料夾刪除即可解決，將解決的網址貼出來：http://blog.csdn.net/crazyzhang1990/article/details/49586049

好了，自此Android和ios平臺的百度地圖全部載入出來了！希望大家也能順利執行出來~