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 (
      
    );
  }
}

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 getPackages() {
  return Arrays.asList(
      new MainReactPackage(),
      new BaiduMapPackage(getApplicationContext())
  );
}

(4) 修改AndroidMainifest.xml 文件

此文件有2处需要配置：
1）配置各种权限
2）添加com.baidu.lbsapi.API_KEY
完整权限配置：

注意：API_key需要自己去百度地图API申请！

(5)运行

使用命令运行项目：

npm install
react-native run-android

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

[email protected]

百度了一下找到了解决方案： 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 选择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时这些已经自动添加，可省略)， 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）编译运行
上效果图~