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

按道理说这样配置完成项目就已经能跑了，但是手机却出错了

QQ20170331-164649@2x.png

百度了一下找到了解决方案：http://www.open-open.com/lib/view/open1477469117948.html
然后运行成功啦~上效果图~

IMG_0914.JPG

2.IOS运行

(1)打开文件

使用Xcode打开新建项目中ios目录中的BaiDuMapDemo.xcodeproj文件

(2)配置

1）Project navigator->Libraries->Add Files to 选择 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）将react-native-baidu-map/ios/lib直接拷贝到新建项目ios目录中，拖动目录到Xcode项目的根目录下，这时Project navigator->Build Settings->Search Paths， Framework search paths 会自动添加 xxx/ios/lib，Header search paths 自动添加 xxx/ios/RCTBaiduMap

QQ20170331-171755.png

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）

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时会有很多坑，我配置时出现了duplicate symbols for architecture x86_64错误，百度后发现是重复导入RCTBaiduMap文件夹导致的，将文件夹删除即可解决，将解决的网址贴出来：http://blog.csdn.net/crazyzhang1990/article/details/49586049

好了，自此Android和ios平台的百度地图全部加载出来了！希望大家也能顺利运行出来~