公司之前开发的地图类APP主要以原生Native的方式实现，现在想要封装一套兼容iOS和Android双平台的sdk。

考虑方向为React-Native和Web-Native，而RN更接近原生效果，所以最终决定使用RN封装地图sdk。

看到Githup上react-native-baidu-map已经使用RN对百度地图做了基础的实现，所以先download下来，运行一下。

参考了

简书文章 react-native 实现百度地图(ios&Android)，感谢 sybil052

一、集成

1) 初始化本地项目

在WorkSpace目录下 shift+右键打开命令窗口，输入下句命令：

react-native init BaiduMapDemo

2) 安装开源项目库

切换到项目的根目录，输入以下命令：

npm install react-native-baidu-map --save
或
yarn add react-native-baidu-map

3) 集成demo并配置

参考了
简书文章 react-native-baidu-map，感谢 妄自
下载react-native-baidu-map 中demo，并将demo中BaiduMapDemo.js拷贝到新建项目根目录下

项目根目录index.js如下修改

// import App from './App';
import BaiduMapDemo from './BaiduMapDemo';

// AppRegistry.registerComponent('BaiduMapDemo', () => App);
AppRegistry.registerComponent('BaiduMapDemo', () => BaiduMapDemo);

setting.gradle中添加

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

app/build.gradle的dependencies中添加

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

MainApplication.java中添加

import org.lovebing.reactnative.baidumap.BaiduMapPackage;

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage(),
                    new BaiduMapPackage(getApplicationContext())//添上这一句，不要忘记上面的逗号。
            );
        }

在AndroidMainifest.xml中添加
注意：权限不要重复添加，react-native编译有时不通过。

    <!-- 这个权限用于进行网络定位-->
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
    <!-- 这个权限用于访问GPS定位-->
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <!-- 用于访问wifi网络信息，wifi信息会用于进行网络定位-->
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
    <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.GET_TASKS" />
    <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="你自己的应用AK"/>

二、遇到的问题及处理方法

(1)

...\node_modules\react-native-baidu-map\android\src\main\java\org\lovebing\reactnative\baidumap\BaiduMapPackage.java
Error:(49, 5) 错误: 方法不会覆盖或实现超类型的方法

    @Override
    public List<Class<? extends JavaScriptModule>> createJSModules() {
        return Collections.emptyList();
    }

ReactPackage 接口中并没有createJSModules()方法，注释掉@Override即可。

(2)

undefined is not an object (evaluating '_react2.PropTypes.bool'
从React15.5起，React.PropTypes被移入到单独的package中。react提供了一个package(prop-types)去检查props的类型。首先需要将prop-types引用到文件中。
更改项目中对组件原的引用方式，在此项目中需要在node_modules\react-native-baidu-map\js\MapView.js文件中

import React, {
  Component,
  PropTypes
} from 'react';

更改为

import React, {
  Component
} from 'react';

import { PropTypes} from 'prop-types';

(3)

项目能运行，地图不显示。
主要因为keystore和及其配置。
把keystore拷贝到 项目\android\keystores目录下，
并在 项目\android\app\build.gradle中配置

signingConfigs {
            debug {
                storeFile file('../keystores/debug.keystore')
                storePassword "android"
                keyAlias "androiddebugkey"
                keyPassword "android"
            }
        }

(4)

提示MainActivity不存在 Activity is not exist

项目\android\app\src\main\AndroidManifest.xml中的 package
与 项目\android\app\build.gradle中的applicationId保持一致。

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="此处">

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.1"

    defaultConfig {
        applicationId "此处"