react-native-baidu-map在react-native中的使用

转载请注明地址：http://blog.csdn.net/sinat_37059404/article/details/73330041

github官网地址：
https://github.com/lovebing/react-native-baidu-map

下载方式：

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

插件使用过程中需要配置的内容：
1，在项目的 android/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')

2， 在android/app/build.gradle 中添加：

dependencies {
  compile project(':react-native-baidu-map') // 添加的一行
  compile fileTree(dir: "libs", include: ["*.jar"])
  compile "com.android.support:appcompat-v7:23.0.1"
  compile "com.facebook.react:react-native:+" // From node_modules
}

3， 在android/app/src/main/AndroidManifest.xml 中添加：
这个地方需要修改两个地方，
一个是修改权限，权限问题就是你需要获取百度的网络定位能；
一个是添加 meta-data，这个就是百度开发的key了，可以从百度里面直接找到具体申请方法，按照步骤做就可以了

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

<application
  ...
  <meta-data
  android:name="com.baidu.lbsapi.API_KEY"
  android:value="I03Xwhn5L3uVBrYSRfG8KzSrSZQkaM8h"/> // 申请到的baidu地图app key ，这个是主要添加的标签，之后再说如何获取百度的key

  ...
  </application>

4, 在android/app/src/main/Java/[…]/MainApplication.java 中添加：

import org.lovebing.reactnative.baidumap.BaiduMapPackage; //添加

  @Override
  protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
  new MainReactPackage(),                    //注意这个地方的逗号
  new BaiduMapPackage(getApplicationContext()) // 添加
  );
  }

5， index.android.js 添加功能实现(导入相关功能组件)：也可以在你需要引入地图的界面修改；BaiduMapDemo组件是官网上的demo，需要复制下载在你的项目中做成一个你的组件来用，直接引入是找不到这个的；

import React, { Component } from 'react';
import {
  AppRegistry,
} from 'react-native';

import BaiduMapDemo from './BaiduMapDemo' //需在index.android.js同级目录下添加BaiduMapDemo.js文档

export default class BaiDuMapDemo extends Component {
  render() {
    return (
      <BaiduMapDemo/>
    );
  }
}

AppRegistry.registerComponent('myrnbaidumap', () => BaiDuMapDemo);

6，然后在运行就可以了
申请百度的key可以参考:
http://lbsyun.baidu.com/index.php?title=androidsdk/guide/key

使用的话可以根据官网的哪个demo改一些就可以用了