最近有很多网友在问RN上怎么集成百度地图，我在之前两个项目中都有使用到react-native-baidu-map,觉得其中的步骤稍微有点复杂，如果哪一步有点疏漏，就很容易报错，接下来我就从零新建一个项目，一步一步记录下我安装的过程，希望能帮助到大家~
成都React-Native交流群，进群给管理，先到先得哦
react-native-baidu-map github地址
1.新建一个RN项目：(BaiDuMapTest)
图片.png
出现以下界面，就表示新建项目成功了
图片.png
2.安装react-native-baidu-map（注意：一定要在项目根目录下进行安装）：
在终端输入：
npm install react-native-baidu-map --save
图片.png
3.Xcode配置：
图片.png
图片.png
Build Phases->Link Binary With Libraries 加入 libRCTBaiduMap.a
图片.png
Build Settings->Search Paths， Framework search paths 添加$(PROJECT_DIR)/../node_modules/react-native-baidu-map/ios/lib,Header search paths 添加 $(SRCROOT)/../node_modules/react-native-baidu-map/ios/RCTBaiduMap
图片.png
图片.png
添加依赖, react-native-baidu-map/ios/lib 下的全部 framwordk:
图片.png
方法：
图片.png
图片.png
图片.png
图片.png
然后继续添加：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）
例如：
图片.png
全部添加完后：
图片.png
接下来添加 BaiduMapAPI_Map.framework/Resources/mapapi.bundle
图片.png
图片.png
图片.png
4.AppDelegate.m init 初始化
#import "RCTBaiduMapViewManager.h"
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
...
[RCTBaiduMapViewManager initSDK:@"api key"];//这里的api key 一定要在官网和APP的Bundle identifier对应，否则地图会显示失败
...
}
图片.png
5.build一下，看看是否配置成功
此时可能会报这个错误：
图片.png
解决办法：
#import "RCTViewManager.h"
#import "RCTConvert+CoreLocation.h"
改成
#import <React/RCTViewManager.h>
#import <React/RCTConvert+CoreLocation.h>
如图:
图片.png
然后就build success啦~
6.到此为止，配置已经完成，我们可以在RN来玩一玩百度地图~
这里我们就参照官网的Demo给大家展示一下：
index.ios.js:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import BaiduMapDemo from './BaiduMapDemo';
export default class BaiDuMapTest extends Component {
render() {
return (
<BaiduMapDemo />
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('BaiDuMapTest', () => BaiDuMapTest);
BaiduMapDemo.js
/**
* @author lovebing
*/
import React, {
Component,
PropTypes
} from 'react';
import {
MapView,
MapTypes,
Geolocation
} from 'react-native-baidu-map';
import {
Button,
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight
} from 'react-native';
import Dimensions from 'Dimensions';
export default class BaiduMapDemo extends Component {
constructor() {
super();
this.state = {
mayType: MapTypes.NORMAL,
zoom: 15,
center: {
longitude: 113.981718,
latitude: 22.542449
},
trafficEnabled: false,
baiduHeatMapEnabled: false,
markers: [{
longitude: 113.981718,
latitude: 22.542449,
title: "Window of the world"
},{
longitude: 113.995516,
latitude: 22.537642,
title: ""
}]
};
}
componentDidMount() {
}
render() {
return (
<View style={styles.container}>
<MapView
trafficEnabled={this.state.trafficEnabled}
baiduHeatMapEnabled={this.state.baiduHeatMapEnabled}
zoom={this.state.zoom}
mapType={this.state.mapType}
center={this.state.center}
marker={this.state.marker}
markers={this.state.markers}
style={styles.map}
onMarkerClick={(e) => {
console.warn(JSON.stringify(e));
}}
onMapClick={(e) => {
}}
>
</MapView>
<View style={styles.row}>
<Button title="Normal" onPress={() => {
this.setState({
mapType: MapTypes.NORMAL
});
}} />
<Button style={styles.btn} title="Satellite" onPress={() => {
this.setState({
mapType: MapTypes.SATELLITE
});
}} />
<Button style={styles.btn} title="Locate" onPress={() => {
console.warn('center', this.state.center);
Geolocation.getCurrentPosition()
.then(data => {
console.warn(JSON.stringify(data));
this.setState({
zoom: 15,
marker: {
latitude: data.latitude,
longitude: data.longitude,
title: 'Your location'
},
center: {
latitude: data.latitude,
longitude: data.longitude,
rand: Math.random()
}
});
})
.catch(e =>{
console.warn(e, 'error');
})
}} />
</View>
<View style={styles.row}>
<Button title="Zoom+" onPress={() => {
this.setState({
zoom: this.state.zoom + 1
});
}} />
<Button title="Zoom-" onPress={() => {
if(this.state.zoom > 0) {
this.setState({
zoom: this.state.zoom - 1
});
}
}} />
</View>
<View style={styles.row}>
<Button title="Traffic" onPress={() => {
this.setState({
trafficEnabled: !this.state.trafficEnabled
});
}} />
<Button title="Baidu HeatMap" onPress={() => {
this.setState({
baiduHeatMapEnabled: !this.state.baiduHeatMapEnabled
});
}} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
row: {
flexDirection: 'row',
height: 40
},
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
map: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height - 200,
marginBottom: 16
}
});
效果图：
图片.png
希望这篇文章能帮助到大家，谢谢~
