react-native 使用百度地图

先到百度地图创建应用：

申请开发版SHA1：

打开终端，输入命令：cd .android，回车继续输入以下命令

keytool -list -v -keystore debug.keystore

口令默认为 android

得到开发版 SHA1

发布版 SHA1：以 Android Stutio 为例(Keytool生成看最下面)：

打开 build => Generate Signed APK

选择新建：

一路 next 最后 finish，在项目 android/app 下生成一个 .keystore 文件

继续在命令行中输入

keytool -list -v -keystore apk的keystore(文件路径)

得到发布版 SHA1:

Keytool -genkey -alias my-release-keystore.keystore -keyalg RSA -validity 20000 -keystore my-release-keystore.keystore

keytool工具是Java JDK自带的证书工具
-genkey参数表示：要生成一个证书（版权、身份识别的安全证书）
-alias参数表示：证书有别名，-alias fantongyo.keystore表示证书别名为:my-release-keystore
-keyalg RSA表示加密类型，RSA表示需要加密，以防止别人盗取
-validity 20000表示有效时间20000天
-keystore my-release-keystore.keystore表示要生成的证书名称为my-release-keystore

--------------------------------------------------------------------------------------------

输入命令：Keytool -genkey -alias my-release-keystore.keystore -keyalg RSA -validity 20000 -keystore my-release-keystore.keystore，到最后提示keytool 错误: java.io.FileNotFoundException: MyAndroidKey.keystore (Permission denied).

原因：缺少权限

方法一更改保存目录：就是讲jdk从c盘挪到其它盘。

方法二更改权限：以管理员身份运行CMD，MAC 下添加 sudo

sudo Keytool -genkey -alias my-release-keystore.keystore -keyalg RSA -validity 20000 -keystore my-release-keystore.keystore

安装 npm i react-native-baidu-map --save

android配置：

在项目的 android/settings.gradle目录下添加：

include ':react-native-baidu-map'
project(':react-native-baidu-map').projectDir = new File(settingsDir, '../node_modules/react-native-baidu-map/android')

在android/app/build.gradle 中添加

    signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
    dependencies {
      implementation project(':react-native-baidu-map') // 添加的一行
      ...
    }

在gradle.properties中添加

MYAPP_RELEASE_STORE_FILE=my-release-keystore.keystore
MYAPP_RELEASE_KEY_ALIAS=my-release-keystore.keystore
MYAPP_RELEASE_STORE_PASSWORD=****** （自己设置的密码）
MYAPP_RELEASE_KEY_PASSWORD=******

在android/app/src/main/AndroidManifest.xml 中添加

<!-- 这个权限用于进行网络定位-->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission>
    <!-- 这个权限用于访问GPS定位-->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission>
    <!-- 用于访问wifi网络信息，wifi信息会用于进行网络定位-->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses-permission>

  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
  <uses-permission android:name="com.android.launcher.permission.READ_SETTINGS" />
  <uses-permission android:name="android.permission.WAKE_LOCK"/>
  <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" />
  <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
  <uses-permission android:name="android.permission.WRITE_SETTINGS" />

<application
  ...
  <meta-data
  android:name="com.baidu.lbsapi.API_KEY"
  android:value="I03Xwhn5L3uVBrYSRfG8KzSrSZQkaM8h"/> // 申请到的baidu地图app key 
  ...
  </application>

MainApplication.java 中添加：

    import org.lovebing.reactnative.baidumap.BaiduMapPackage; //添加

    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
              new BaiduMapPackage(getApplicationContext())
      );
    }

在node_modules/react-native-baidu-map中修改 MapView.js

修改前：
import React, {
  Component,
  PropTypes
} from 'react';

修改后：
import React, {
  Component,
} from 'react';
import PropTypes from 'prop-types'

在node_modules/react-native-baidu-map/android 下修改 BaiduMapPackage.java

删除或注释第 49 行的：@Override

react-native 使用百度地图

猜你喜欢