React-Naitve 百度地图配置教程

第一步：创建一个空的react-native项目
a) react-native init [project name] 创建的是最新版本的项目
b) 用提供的特定版本 先创建再降版本
第二步：然后添加百度地图的插件react-native-baidu-map

1 )、 npm install –save react-native-baidu-map
2 ) 、react-native link react-native-baidu-map

第三步：修改第一处配置信息
[project name]–>android–>app–>src–>main–>java
–>com–>baidumaps–>MainApplication.java
在该文件里面找到方法：

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
        new BaiduMapPackage()
  );
}

修改成如下这样：

@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
        new BaiduMapPackage(getApplicationContext())
  );
}

第四步：申请百度地图的密钥，链接地址：http://lbsyun.baidu.com/apiconsole/key
具体操作步骤可以参考http://lbsyun.baidu.com/index.php?title=androidsdk/guide/key

•  cmd
•  cd .android
•  keytool -list -v -keystore debug.keystore
•  输入密钥库口令：android
  

这样我们就获取到了百度地图的AK码：

•  填写包名：

[project name]–>android–>app–>src–>main–>AndroidManifest.xml

第五步：[project name]–>android–>app–>src–>main–>AndroidManifest.xml
(一) 、在文件里面找到这两行

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

其他的权限设置：

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

(二) 、将上面申请的AK码应用到项目里面：
在文件里面找到代码

<application
  android:name=".MainApplication"
  android:allowBackup="true"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:theme="@style/AppTheme">
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize">

添加AK码配置

<application
  android:name=".MainApplication"
  android:allowBackup="true"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:theme="@style/AppTheme">

    <meta-data
            android:name="com.baidu.lbsapi.API_KEY"
            android:value="AK码"/>

  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize">

最后：上效果图：