react-native-baidu-map的配置实践

想使用react-native做一个地图应用，安装的过程中遇到了不少问题，这里总结一下安装过程

初始化一个react-native项目 react-native init mapApp

安装react-native-baidu-map，适用npm安装的时候总会被莫名其妙的被删除一下依赖包，所以使用的yarn，yarn add react-native-baidu-map --save

然后去百度地图开发平台申请ak

应用类型选择android SDK

填写发布版SHA1

获取方式：打开cmd 输入cd .android

输入keytool -list -v -keystore debug.keystore

获取指纹证书中的SHA1

填写包名

获取方式：mapApp/android/app/src/main/AndroidManifest.xml文件中的package="com.mapapp"

填写完毕提交

在android目录下的settings.gradle文件下添加以下内容

include ':react-native-baidu-map'

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

在android/app目录下的build.gradle文件下dependencies中添加以下内容

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

在android/app/src/main/java/com/mapapp/MainApplication.java文件中添加以下内容

import org.lovebing.reactnative.baidumap.BaiduMapPackage;

List ReactPackage中添加, new BaiduMapPackage(getApplicationContext())逗号不能少

在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>              
            <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" />
            
            
            <meta-data  
                android:name="com.baidu.lbsapi.API_KEY"  
                android:value="ep76v15zBgBFPch30RAsYl3PihzIlTh4"/>  
                ep76v15zBgBFPch30RAsYl3PihzIlTh4</br>就是在百度地图开放图片上面申请的key

走到这一步基本配置已经差不多ok了
在你的应用中引入react-natvie-baidu-map并使用，然后运行项目

这个时候应该会报错，node_modules\react-native-baidu-map\android\src\main\java\org\lovebing\reactnative\baidumap\BaiduMapPackage.java:49: 错误: 方法不会覆盖或实现超类型的方法

如果遇到这个错误删除掉这个路径下的依赖文件中的@Override方法

再次运行，这时命令行应该不会报错了，但是在模拟器上应该是一片红色报错，react-native-baidu-map undefined is not an object(evaluting 'a.PropTypes.bool')

将node_modules\react-native-baidu-map\js\MapView.js中的import React, {
Component,
PropTypes
} from 'react';
对PropTypes的引用修改为import PropTypes from 'prop-types'

再次启动，ok

react-native-baidu-map的配置实践

推荐阅读更多精彩内容