美文网首页
react-native-baidu-map安卓端集成

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

作者: luuuuuuuuuuuuu | 来源:发表于2018-04-27 15:41 被阅读0次

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

    相关文章

      网友评论

          本文标题:react-native-baidu-map安卓端集成

          本文链接:https://www.haomeiwen.com/subject/otgblftx.html