preface

Recently, I am working on an Android project using React-Native, which involves location positioning. So I went to Github to search for maps available in React- Native. There are act-native Amap3D and Baidu Map react-native Amap3D, and Baidu Map react-native Baidu-map ★ the number is high, look at the introduction, it seems that Baidu Map is more detailed, so it is used.

To apply for the key

  1. Enter baidu Map open platform and register your account
  2. Select the Android SDK in the development documentation
  3. Select Get key, then add application
  4. Fill in the information
  • The name literally
  • Select Android SDK as the application type
  • PackageName can be viewed in androidmanifest.xmlCom. project name lowercase
  • To obtain the development version of SHA1, first open the terminal (Win icon key +R) and enter. Android
cd .android
Copy the code

Then enter the command, the keystore password default is Android

keytool -v -list -keystore debug.keystore
Copy the code
  • Get the release SHA1

    Since it is the first time to use it, we need to go to Android Studio and select it in the build of ASGenerate Signed Bundle/APK, select the APK

    Then create new, fill in the key Store path, password, and confirm to create a xxx.jks file.

    Finally, go to the xxx. JKS file directory and execute the following command to get the SHA1 distribution

keytool -v -list -keystore xxx.jks
Copy the code

The configuration steps

  1. Import package, here version is “^1.0.26”
yarn add react-native-baidu-map
Copy the code
  1. link
react-native link react-native-baidu-map
Copy the code
  1. Modify the AndroidManifest. XML
  • Open access
<! - access to GPS - > < USES - permission android: name = "android. Permission. ACCESS_FINE_LOCATION" / > <! - network positioning - > < USES - permission android: name = "android. Permission. ACCESS_COARSE_LOCATION" / > <! -- For accessing wifi network information, Wifi positioning information will be used for network - > < USES - permission android: name = "android. Permission. ACCESS_WIFI_STATE" / > < USES - the permission android:name="android.permission.READ_PHONE_STATE" />Copy the code
  • Add the APPLIED AK to the application
<meta-data
  android:name="com.baidu.lbsapi.API_KEY"
  android:value="Your AK"/>
Copy the code

At this point, our configuration is complete and we are ready to start our journey.

Map location

Let’s use a quick Demo to learn how to use Baidu Map in A React-Native project. First, we import the components we need to use.

import React, { Component } from 'react';
import { View } from 'react-native'
import { MapView, MapTypes, Overlay} from 'react-native-baidu-map'
import styles from '.. /assets/styles/LightMap'
import HeaderTitle from '.. /components/HeaderTitle'
Copy the code

Then, build some attributes and attribute values that Baidu map needs to use.

this.state = {
  mayType: MapTypes.NORMAL, // Map type
  zoom: 15./ / ratio
  trafficEnabled: true.baiduHeatMapEnabled: true.center: { / / point
    latitude: props.navigation.state.params.lat,
    longitude: props.navigation.state.params.lng
  }
}
Copy the code

From there, we can build the map using components.

  render() {
    const { Marker, Cluster} = Overlay
    return(< > {/ * * / custom head} < HeaderTitle title = {this. Props. Navigation. State. Params. Title} navigation = {this. Props. Navigation} HasBack ={true}></HeaderTitle> {/* 显 显 的 */} <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} style={styles.map} onMapClick={(e) => { }}> <Cluster> <Marker location={{ ... this.state.center }} /> </Cluster> </MapView> </View> </> ) }Copy the code

Finally, let’s take a look at the final result.

conclusion

This article mainly records the first time that xiaobi used Baidu Map in React-Native. It may not have used more functions of Baidu Map. Other functions can be used by baidu Map react-native baidu map oh. Ps: attached is this react-native project address cat’s eye movie android, if it is helpful to you, please send me ★★ oh ^_^.