react-native-baidu-map安卓端集成

2018-04-27  本文已影响0人  luuuuuuuuuuuuu

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里面都有回答,大家可以参考下。

上一篇下一篇

猜你喜欢

热点阅读