React native导入百度地图

开源地址：https://github.com/lovebing/react-native-baidu-map

今天在React native中导入百度地图组件遇到过许多坑，特此写一篇博客记录踩过的坑...

1、Install 安装

npm install react-native-baidu-map --save

2、在settings.gradle中添加以下内容

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

3、在build.gradle中添加：

compile project(':react-native-baidu-map')

如下：

4、修改MainApplication.java 文件

添加：new BaiduMapPackage(getApplicationContext())

除此之外，别忘了将包导进来：不过一般都会自动导进来。
MainApplication


import org.lovebing.reactnative.baidumap.BaiduMapPackage;

5、修改AndroidMainifest.xml 文件

1）配置各种权限

2）添加com.baidu.lbsapi.API_KEY
完整文件如下：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.market">

     <!-- 这个权限用于进行网络定位-->
    <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" />

    <uses-permission android:name="android.permission.INTERNET" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:allowBackup="false"
      android:theme="@style/AppTheme">
      <meta-data
          android:name="com.baidu.lbsapi.API_KEY"
          android:value="换成你自己的apikey"/>
     <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

</manifest>

获得Android签名的sha1值：

第1步：运行进入控制台

第2步：定位到.android文件夹下，输入cd .android

第3步：输入keytool -list -v -keystore debug.keystore，会得到三种指纹证书，选取SHA1类型的证书（密钥口令是android），例如：

其中keytool为jdk自带工具；keystorefile为Android 签名证书文件

7、修改Demo程序

直接使用提供的Demo源文件

import BaiduMapDemo from './BaiduMapDemo';

遇到的问题：

修改BaiduMapPackage.js中的第49行删除 @Override

在编译器目录中找不到、直接在文件中搜索该文件

然后又出现了图示的错误：

这是因为在新版React Native中proptype需要单独引入，

删除MapView.js中老版本定义的PropTypes

在MapView.js中加入：

import PropTypes from 'prop-types';

这样就完成了，分享一下运行结果：

打包成apk后，会出现地图无法显示的情况，这是因为配置的是开发版，必须要配置发布版，

配置时候运行如下命令：

keytool -v -list -keystore E:/XXX.jksXXX.jks （此处写你自己的key

配置后将生成的SHA1配置到百度地图的后台。

React native导入百度地图

猜你喜欢