RN版本：0.63.4
系統：Win10
前言
本系列文檔是React Native學習筆記，主要記錄學習過程中遇到的問題和注意點。 如果有人希望按照此文檔開始學習，那么最好有一些Android和前端開發基礎，因為此文檔只會記錄作者的學習過程中的重點難點,而不會詳細列出每一個步驟。
1.引入地圖組件
在國內，由于墻的存在，沒有辦法直接使用react native自帶的地圖組件，百度地圖和高德地圖也沒有針對react native的官方組件，所以只能使用第三方基于android和ios端地圖魔改的組件，我這邊通過比較最終還是選擇了lovebing魔改的百度地圖,node包地址在 https://www.npmjs.com/package/react-native-baidu-map 有興趣的話也可以自己看一下。
使用前需確認自己當前環境符合以下要求
JS:
node: 12+
react-native: 0.50.+ 2.Android
Android SDK: api 28+
gradle: 4.10.1
Android Studio: 3.1.3+
iOS:
XCode: 11.3+
確認符合之后，通過以下方式引入node包
1. npm: node install react-native-baidu-map
2. yarn: yarn add react-native-baidu-map
然后就要針對android和ios分別配置了
2.Android:
AndroidManifest.xml：節點
<!-- 權限 -->
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<!-- 在application下加入此節點 -->
<!-- 此處請務必確認Key對應的平臺是Android -->
<meta-data
android:name="com.baidu.lbsapi.API_KEY"
android:value="申請的百度地圖的Key" />
3.IOS
ios端的Key只需要在頁面上配置
import { BaiduMapManager } from 'react-native-baidu-map'
// 此處請務必確認Key對應的平臺是IOS
BaiduMapManager.initSDK('申請的百度地圖的Key');
4.常見問題
The 'Pods-xx' target has libraries with conflicting names: libcrypto.a and libssl.a.
解決方案
1、首先package.json文件中刪除"react-native-baidu-map"，然后yarn install,
2、然后到iOS目錄下，pod install ,然后打開***.xcworkspace工程項目，刪除Pods/OpenSSL-Universal/Static/Support Files/底下的libssl.a和libcrypto.a
3、然后返回上級目錄，package.json文件中添加"react-native-baidu-map"，然后yarn install,
4、然后到iOS目錄下，pod install --no-repo-update，就可以了
5.使用定位
import React, { useState } from 'react';
import { SafeAreaView, StyleSheet, ScrollView, View, Text, StatusBar, Button, Dimensions } from 'react-native';
import { BaiduMapManager, MapView, MapTypes, Geolocation, Overlay, MapApp } from 'react-native-baidu-map';
BaiduMapManager.initSDK("申請的IOS Key");
// 獲取屏幕大小
const { height, width } = Dimensions.get('window');
const App = () => {
const [location, setLocation] = useState({});
const [center, setCenter] = useState({ longitude: 113.950453, latitude: 22.546045 });
const [markers, setMarkers] = useState([
{
location: {
longitude: 113.960453,
latitude: 22.546045
}
},
{
location: {
longitude: 113.961453,
latitude: 22.547045
}
},
{
location: {
longitude: 113.962453,
latitude: 22.548045
}
},
{
location: {
longitude: 113.963453,
latitude: 22.545045
}
},
{
location: {
longitude: 113.964453,
latitude: 22.544045
}
}
]);
return (
<>
<StatusBar barStyle="dark-content" />
<SafeAreaView>
<ScrollView
contentInsetAdjustmentBehavior="automatic"
style={styles.scrollView}>
<View style={styles.body}>
<MapView
showsUserLocation={true}
locationData={location}
// 地圖的大小必須設置
width={width}
height={400}
zoom={18}
trafficEnabled={true}
zoomControlsVisible={true}
mapType={MapTypes.NORMAL}
center={center}
>
<Overlay.Marker rotate={45} icon={{ uri: 'https://mapopen-website-wiki.cdn.bcebos.com/homePage/images/logox1.png' }} location={{ longitude: 113.975453, latitude: 22.510045 }} />
<Overlay.Cluster>
<Overlay.Marker location={{ longitude: 113.969453, latitude: 22.530045 }} />
<Overlay.Marker location={{ longitude: 113.968453, latitude: 22.531045 }} />
<Overlay.Marker location={{ longitude: 113.967453, latitude: 22.532045 }} />
<Overlay.Marker location={{ longitude: 113.966453, latitude: 22.533045 }} />
<Overlay.Marker location={{ longitude: 113.965453, latitude: 22.534045 }} />
<Overlay.Marker location={{ longitude: 113.965453, latitude: 22.535045 }} />
</Overlay.Cluster>
<Overlay.Cluster>
{markers.map((marker, index) => <Overlay.Marker key={`marker-` + index} location={marker.location} />)}
</Overlay.Cluster>
<Overlay.Polyline
longitude={113.960453}
latitude={22.546045}
// 軌跡點個數必須大于2
points={[{ longitude: 113.960453, latitude: 22.546145 }, { longitude: 113.961453, latitude: 22.547045 }, { longitude: 113.962453, latitude: 22.54045 }]} />
<Overlay.Arc
longitude={113.960453}
latitude={22.546045}
points={[{ longitude: 113.960453, latitude: 22.546045 }, { longitude: 113.960453, latitude: 22.546145 }, { longitude: 113.960453, latitude: 22.546245 }]} />
</MapView>
<View style={styles.buttonGroup}>
<View style={styles.button}>
<Button onPress={ () => {
Geolocation.getCurrentPosition()
.then((data) => {
setLocation(data);
setCenter(data);
});}
}
title="Locate Once" />
</View>
<View style={styles.button}>
<Button onPress={ () => {
const startPoint = {
longitude: 113.904453,
latitude: 22.544045,
name: '地點1'
};
const endPoint = {
longitude: 113.994453,
latitude: 22.544045,
name: '地點2'
};
MapApp.openTransitRoute(startPoint, endPoint);
} }
title="Transit Route" />
</View>
<View style={styles.button}>
<Button onPress={ () => {
const startPoint = {
longitude: 113.904453,
latitude: 22.544045,
name: '地點1'
};
const endPoint = {
longitude: 113.994453,
latitude: 22.544045,
name: '地點2'
};
MapApp.openDrivingRoute(startPoint, endPoint);
} }
title="Drive Route" />
</View>
</View>
{ location.address ? (
<View style={styles.location}>
<Text>當前位置：{ location.address }</Text>
</View>
) : null}
</View>
</ScrollView>
</SafeAreaView>
</>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
scrollView: {
},
location: {
padding: 16,
},
buttonGroup: {
padding: 16,
flexDirection: 'row'
},
button: {
width: 80,
margin: 8
}
});
export default App;
