最近有很多網(wǎng)友在問RN上怎么集成百度地圖，我在之前兩個項(xiàng)目中都有使用到react-native-baidu-map,覺得其中的步驟稍微有點(diǎn)復(fù)雜随常，如果哪一步有點(diǎn)疏漏，就很容易報錯肩榕，接下來我就從零新建一個項(xiàng)目塘雳，一步一步記錄下我安裝的過程匾效，希望能幫助到大家~
成都React-Native交流群舷蟀，進(jìn)群給管理，先到先得哦
react-native-baidu-map github地址
1.新建一個RN項(xiàng)目：(BaiDuMapTest)
圖片.png
出現(xiàn)以下界面面哼，就表示新建項(xiàng)目成功了
圖片.png
2.安裝react-native-baidu-map（注意：一定要在項(xiàng)目根目錄下進(jìn)行安裝）：
在終端輸入：
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
然后繼續(xù)添加：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 一定要在官網(wǎng)和APP的Bundle identifier對應(yīng)搁吓，否則地圖會顯示失敗
...
}
圖片.png
5.build一下，看看是否配置成功
此時可能會報這個錯誤：
圖片.png
解決辦法：
#import "RCTViewManager.h"
#import "RCTConvert+CoreLocation.h"
改成
#import <React/RCTViewManager.h>
#import <React/RCTConvert+CoreLocation.h>
如圖:
圖片.png
然后就build success啦~
6.到此為止吭历，配置已經(jīng)完成堕仔，我們可以在RN來玩一玩百度地圖~
這里我們就參照官網(wǎng)的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
希望這篇文章能幫助到大家，謝謝~
