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

最后：上效果图：