一、环境

终端操作

1.切换到目录文件下

 cd 相应的目录文件下

2.下载新项目，如果已有，忽略

 react-native init 项目名

如果需要指定版本的项目

react-native init demo --verbose --version 0.54.2

3.切换到项目目录文件下

 cd 相应的项目目录文件下

4.下载地图包

npm install react-native-baidu-map --save

Xcode操作

1.打开项目

2.Project navigator->Libraries->Add Files to 选择 node_modules/react-native-baidu-map/ios/RCTBaiduMap.xcodeproj

3.Project navigator->Build Phases->Link Binary With Libraries 加入 libRCTBaiduMap.a

4.Project navigator->Build Settings->Search Paths

以下，选递归 recursive 和默认的 non-recursive都行。建议递归！

• TARGETS-Build Setting - Framework Search Paths 里面添加

$(SRCROOT)/../node_modules/react-native-baidu-map/ios/lib

• TARGETS-Build Setting - Header Search Paths 里面添加

$(SRCROOT)/../node_modules/react-native-baidu-map/ios/lib
$(SRCROOT)/../node_modules/react-native-baidu-map/ios/RCTBaiduMap 

• TARGETS-Build Setting - Library Search Paths 里面添加

$(SRCROOT)/../node_modules/react-native-baidu-map/ios/lib

5.Project navigator->Build Phases->Link Binary With Libraries 加入依赖库

CoreLocation.framework
QuartzCore.framework
OpenGLES.framework
SystemConfiguration.framework
CoreGraphics.framework
Security.framework
libsqlite3.0.tbd
CoreTelephony.framework
libstdc++.6.0.9.tbd

6.添加依赖, react-native-baidu-map/ios/lib 下的全部 framwordk:

可以拖拽进项目Project navigator->Build Phases->Link Binary With Libraries 位置

也可以在此目录下选择Add Other...

image.png

7.ios项目根目录中添加 node_modules/react-native-baidu-map/ios/lib/BaiduMapAPI_Map.framework/Resources/mapapi.bundle 文件

建议拖拽

image.png

拖拽时，选择1，2，4

image.png image.png

8.AppDelegate.m init 初始化

#import "RCTBaiduMapViewManager.h"
  - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  {
      ...
      [RCTBaiduMapViewManager initSDK:@"api key"];
      ...
  }

以下是重点，排坑

9.解决重定义问题

不导入RCTBaiduMap库并且链接就不会有这个错误，只有导入了地图库才会导致这个重定义问题

image.png

注释 #import "RCTBridgeModule.h" 解决重定义问题

image.png

10.解决文件找不到

• RCTBaiduMapView.h 报错 'RCTViewManager.h' file not found
• RCTBaiduMapView.h 报错 'RCTConvert+CoreLocation.h' file not found

image.png

注释掉找不到的文件，改成尖括号如下

#import <React/RCTViewManager.h>
#import <React/RCTConvert+CoreLocation.h>

image.png

11.巨坑，导入MapView时会报错（也就是使用地图的时候）

image.png

将 node_modules/react-native-baidu-map/js/MapView.js中的

import React, {
  Component,
  PropTypes
} from 'react';

修改成

import React, {
  Component,
} from 'react';

import PropTypes from 'prop-types';

12.巨坑，有时候好好的，有时候突然就爆红！

image.png

将 node_modules/react-native-baidu-map/js/MapView.js中的最后一段 注释掉

const BaiduMapView = requireNativeComponent('RCTBaiduMapView', MapView, {
  nativeOnly: {onChange: true}
});

//注释掉

至此，iOS端可以编译通过跑起来了。

版本：Xcode 9.2 、 React Native 0.54.2 、 时间：2018.03.21

这会是一个系列文章！

本文链接:020-React Native百度地图集成

下一篇:021-地图系列01-iOS百度地图集成