最近公司需要在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 选择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）编译运行
上效果图~
QQ20170331-172320@2x.png
注意：在配置iOS时会有很多坑，我配置时出现了duplicate symbols for architecture x86_64错误，百度后发现是重复导入RCTBaiduMap文件夹导致的，将文件夹删除即可解决，将解决的网址贴出来：http://blog.csdn.net/crazyzhang1990/article/details/49586049
好了，自此Android和ios平台的百度地图全部加载出来了！希望大家也能顺利运行出来~
网友评论