1、安装
npm install react-native-baidu-map --save
2、配置
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
dependencies添加
compile project(':react-native-baidu-map')
android/app/src/main/java/../MainApplication
import org.lovebing.reactnative.baidumap.BaiduMapPackage; //添加此句
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new BaiduMapPackage(getApplicationContext()) //添加此句
);
}
android/app/src/AndroidManifest
<!-- 这个权限用于进行网络定位-->
<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.ACCESS_NETWORK_STATE"></uses-permission>
<!-- 这个权限用于获取wifi的获取权限,wifi信息会用来进行网络定位-->
<uses-permission android:name="android.permission.CHANGE_WIFI_STATE"></uses-permission>
<!-- 用于读取手机当前的状态-->
<uses-permission android:name="android.permission.READ_PHONE_STATE"></uses-permission>
<!-- 写入扩展存储,向扩展卡写入数据,用于写入离线定位数据-->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses-permission>
<!-- 访问网络,网络定位需要上网-->
<!-- SD卡读取权限,用户写入离线定位数据-->
<uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"></uses-permission>
//key是自己申请的百度地图密钥,如果key不对,页面可能只出现网格。
<meta-data android:name="com.baidu.lbsapi.API_KEY"
android:value="你申请的key"/>
以上就是android端所有配置,项目跑起来可能会出现以下错误:
1、node_modules里面百度地图源文件BaiduMapPackage.java 49行 报符号之类的错
解决方法 删掉 49行 @Override
2、 如果react-native版本较低,可能会报object类的错误,具体我忘记了,解决方法:
node_modules/react-native-baidu-map/js/MapView
将上面import大括号内引入的PropType
删掉,引入import PropTypes from 'prop-types';
附上官网地址:
https://github.com/lovebing/react-native-baidu-map
有很多出现过的问题在Issue里面都有回答,大家可以参考下。
网友评论