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;
网友评论