react-native-baidu-map简单应用

react-native-baidu-map简单应用

demo: http://download.youkuaiyun.com/detail/keen_zuxwang/9837094

命令行创建项目工程、安装、关联组件
1、react-native init myrnbaidumap
2、cd myrnbaidumap
// react-native-baidu-map component：https://github.com/lovebing/react-native-baidu-map

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

3、配置android工程
首先在android目录下加入local.properties(命令行创建工程，默认不包含该文件，指定android工程sdk目录sdk.dir)

a、android/settings.gradle 中添加：

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

b、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
}

c、android/app/src/main/AndroidManifest.xml 中添加：
访问权限：

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

      ...
    </application>

b、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()) // 添加
      );
    }

4、index.android.js 添加功能实现(导入相关功能组件)：

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);

5、命令行执行(即开启packager, Running packager on port 8081)：
react-native start
//浏览器地址栏输入：http://localhost:8081/index.android.bundle?platform=android，检测看server是否启动完成

6、命令行执行(连接android真机/模拟器，新开命令窗口，进入到项目myrnbaidumap目录下，输入如下指令)：
react-native run-android

7、真机/模拟器显示运行界面（初次运行会显示Unable to download JS bundle 提示界面，需点击菜单按键进入 Dev Settings–>Debug server host & port for device 设置IP和端口(android 5.0版本以下才需配置以上项，android 5.0版本以上则执行adb reverse tcp:8081 tcp:8081命令即可), 然后返回点击从新载入Reload即可正常显示界面）

Debug JS Remotely：
点击Developer Menu的Debug JS Remotely项开启, 成功会自动开启chrome调试界面
Enable Live Reload：
会在保持你的程序状态的情况下，就可以将最新的代码部署到设备上，但每次都会自动返回到启动页面
Hot Reloading：
会自动生成此次修改代码的增量包，然后传输到手机或模拟器上以实现热加载