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

準(zhǔn)備工作

先說明一下，我使用的react-native開發(fā)工具是webStorm，同時我們需要你的電腦上裝有Android studio和Xcode，這樣方便我們配置后面的一些東西。android我使用的是真機(jī)來運行，而ios直接使用模擬器運行，至于mac上怎么使用Android真機(jī)運行程序，我想也不用贅述了。
好了，下面正式開始我們的項目。

1.創(chuàng)建項目

首先打開終端，在相應(yīng)的目錄下輸入命令創(chuàng)建新項目，

react-native init BaiDuMapDemo

項目創(chuàng)建完成，進(jìn)入項目根目錄下輸入

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

打開網(wǎng)址：https://github.com/lovebing/react-native-baidu-map
下載demo，如果你有g(shù)it，你也可以直接使用命令下載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中添加以下內(nèi)容

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）配置各種權(quán)限
2）添加com.baidu.lbsapi.API_KEY
完整權(quán)限配置：

    <!-- 這個權(quán)限用于進(jìn)行網(wǎng)絡(luò)定位-->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission>
    <!-- 這個權(quán)限用于訪問GPS定位-->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>
    <!-- 用于訪問wifi網(wǎng)絡(luò)信息，wifi信息會用于進(jìn)行網(wǎng)絡(luò)定位-->
    <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

按道理說這樣配置完成項目就已經(jīng)能跑了，但是手機(jī)卻出錯了

QQ20170331-164649@2x.png

IMG_0914.JPG

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

QQ20170331-170747.png

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

QQ20170331-171006.png

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

QQ20170331-171755.png

4）添加依賴, react-native-baidu-map/ios/lib 下的全部 framwordk(上一步拷貝lib時這些已經(jīng)自動添加，可省略)， 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）

QQ20170331-172020.png

5）添加 BaiduMapAPI_Map.framework/Resources/mapapi.bundle

QQ20170331-172144.png

6）AppDelegate.m init 初始化

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

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

7）編譯運行
上效果圖~

QQ20170331-172320@2x.png

注意：在配置iOS時會有很多坑，我配置時出現(xiàn)了duplicate symbols for architecture x86_64錯誤，百度后發(fā)現(xiàn)是重復(fù)導(dǎo)入RCTBaiduMap文件夾導(dǎo)致的，將文件夾刪除即可解決，將解決的網(wǎng)址貼出來：http://blog.csdn.net/crazyzhang1990/article/details/49586049

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