Recently, many netizens have asked RN how to integrate Baidu Map. I used react-native-baidu-map in both previous projects. I feel that the steps are slightly complicated. If there is a slight omission in one step, it is easy to make a mistake. Next, I will build a new project from scratch and record the process of my installation step by step. I hope I can help you.~
react-native-baidu-map github address
1. Create a new RN project: (BaiDuMapTest)

The following interface appears to indicate that the new project has succeeded

2. Install react-native-baidu-map (Note: Be sure to install it in the project root directory):
In the terminal input:
npm install react-native-baidu-map --save

3.Xcode configuration:


Build Phases - > Link Binary With Libraries join libRCT BaiduMap.a

Build Settings - > Search Paths, Framework search paths add $(PROJECT_DIR)/. / node_modules/react-native-baidu-map/ios/lib, Header search paths add $(SRCROOT)/. / node_modules/react-native-baidu-map/ios/RCTduMap


Adding dependencies, all framwordk under react-native-baidu-map/ios/lib:

Method:




Then continue adding: CoreLocation.framework and Quartz Core. framework, OpenGLES.framework, SystemConfiguration.framework, CoreGraphics.framework, Security.framework, libsqlite3.0.tbd (libsqlite3.0.dylib before Xcode 7), CoreTelephony.framework, libstdc+.6.0.9.tbd (libstdc+.9.tbd before Xcode 7).+ + 6.0.9. dylib)
For example:

After adding all:

Next add BaiduMap API_Map.framework/Resources/mapapi.bundle



4.AppDelegate.m init initialization
#import "RCTBaiduMapViewManager.h" - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { ... [RCTBaiduMapViewManager initSDK:@"api key"];//The api key here must correspond to the Bundle identifier of APP on the official website, otherwise the map will fail. ... }

5.build to see if the configuration is successful
This error may be reported at this time:

Solution:
#import "RCTViewManager.h" #import "RCTConvert+CoreLocation.h"
Change to
#import <React/RCTViewManager.h> #import <React/RCTConvert+CoreLocation.h>
As shown in the figure:

Then build success.~
6. So far, the configuration has been completed, we can play Baidu Map in RN.~
Here we will refer to Demo on the official website to show you:
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 } });
Design sketch:

I hope this article can help you. Thank you.~