react-native-baidu-map iOS端集成

最近有很多網(wǎng)友在問RN上怎么集成百度地圖，我在之前兩個項目中都有使用到react-native-baidu-map,覺得其中的步驟稍微有點復(fù)雜，如果哪一步有點疏漏，就很容易報錯，接下來我就從零新建一個項目，一步一步記錄下我安裝的過程，希望能幫助到大家~

成都React-Native交流群，進(jìn)群給管理，先到先得哦

react-native-baidu-map github地址

1.新建一個RN項目：(BaiDuMapTest)

圖片.png

出現(xiàn)以下界面，就表示新建項目成功了

圖片.png

2.安裝react-native-baidu-map（注意：一定要在項目根目錄下進(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

希望這篇文章能幫助到大家，謝謝~

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • React Native優(yōu)秀博客，以及優(yōu)秀的Github庫列表（很多英文資料源自于[awesome-react-n...
    董董董董董董董董董大笨蛋閱讀 11,003評論 4贊 162
  • 持續(xù)更新中...... 一套企業(yè)級的 UI 設(shè)計語言和 React 實現(xiàn)。 https://mobile.ant....
    日不落000閱讀 6,051評論 0贊 35
  • 最近公司需要在app上使用地圖組件加載地圖，從網(wǎng)上找了很多第三方都不是很理想，總會有ios和Android不兼容的...
    sybil052閱讀 13,287評論 20贊 19
  • 需求： 最近準(zhǔn)備在公司項目中使用RN，但羅馬不是一天建成的，沒辦法將項目中所有的代碼都換成RN，而且我也不認(rèn)為全換...
    掛著鈴鐺的兔閱讀 9,186評論 20贊 37
  • 世上根本就沒有捷徑可言、超越難度越大的事物、離成功的把握就越大，越簡單越容易的、保質(zhì)期就越短、這就是難易的基本規(guī)律...
    鴻淑企劃閱讀 238評論 0贊 0

友情鏈接更多精彩內(nèi)容