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
在该文件里面找到方法：

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

修改成如下这样：

@Overrideprotected 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">

最后：上效果图：