|
| 1 | +React Native Location Module |
| 2 | +============================ |
| 3 | + |
| 4 | +## 1. Introduction |
| 5 | + |
| 6 | +Eleme location (based on amap) react native module. |
| 7 | + |
| 8 | +Native module based on: |
| 9 | + |
| 10 | +- AMap Android sdk version: 3.1.0 . |
| 11 | + |
| 12 | +- AMap iOS sdk version: |
| 13 | + |
| 14 | + - AMapFoundationKit 1.3.3 |
| 15 | + - AMapLocationKit 2.2.0 |
| 16 | + |
| 17 | + |
| 18 | +## 2. Usage |
| 19 | + |
| 20 | +### 2.1 Installation |
| 21 | + |
| 22 | +#### Step 1 |
| 23 | + |
| 24 | +run ```npm install ele-react-native-location --save``` |
| 25 | + |
| 26 | +### 2.2 Android Configuration |
| 27 | + |
| 28 | +- android/setting.gradle |
| 29 | + |
| 30 | +``` |
| 31 | +include ':ele-react-native-location' |
| 32 | +project(':ele-react-native-location').projectDir = new File(rootProject.projectDir, '../node_modules/ele-react-native-location/android') |
| 33 | +``` |
| 34 | +- android/app/build.gradle |
| 35 | + |
| 36 | +``` |
| 37 | +compile project(":ele-react-native-location") |
| 38 | +``` |
| 39 | + |
| 40 | +- MainApplication.java |
| 41 | + |
| 42 | +``` |
| 43 | + @Override |
| 44 | + protected List<ReactPackage> getPackages() { |
| 45 | + return Arrays.<ReactPackage>asList( |
| 46 | + ..., |
| 47 | + new AMapLocationReactPackage() // Add this line |
| 48 | + ); |
| 49 | + } |
| 50 | +``` |
| 51 | + |
| 52 | +- AndroidManifest.xml |
| 53 | + |
| 54 | +``` |
| 55 | + <!--用于进行网络定位--> |
| 56 | + <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"></uses-permission> |
| 57 | + <!--用于访问GPS定位--> |
| 58 | + <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"></uses-permission> |
| 59 | + <!--获取运营商信息,用于支持提供运营商信息相关的接口--> |
| 60 | + <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"></uses-permission> |
| 61 | + <!--用于访问wifi网络信息,wifi信息会用于进行网络定位--> |
| 62 | + <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"></uses-permission> |
| 63 | + <!--这个权限用于获取wifi的获取权限,wifi信息会用来进行网络定位--> |
| 64 | + <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"></uses-permission> |
| 65 | + <!--用于访问网络,网络定位需要上网--> |
| 66 | + <uses-permission android:name="android.permission.INTERNET"></uses-permission> |
| 67 | + <!--用于读取手机当前的状态--> |
| 68 | + <uses-permission android:name="android.permission.READ_PHONE_STATE"></uses-permission> |
| 69 | + <!--写入扩展存储,向扩展卡写入数据,用于写入缓存定位数据--> |
| 70 | + <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses-permission> |
| 71 | + <uses-permission android:name="android.permission.INTERNET" /> |
| 72 | +``` |
| 73 | + |
| 74 | +Remember setting your custom amap key as follows! |
| 75 | + |
| 76 | +``` |
| 77 | + <!--高德地图SDK key设置--> |
| 78 | + <meta-data |
| 79 | + android:name="com.amap.api.v2.apikey" |
| 80 | + android:value="请填写您的key"/> |
| 81 | + <!--高德地图APS服务设置--> |
| 82 | + <service android:name="com.amap.api.location.APSService" ></service> |
| 83 | +``` |
| 84 | + |
| 85 | +### 2.3 iOS Configuration |
| 86 | + |
| 87 | +- Drag ./node_modules/ele-react-native-location/ios/ELMRNLocation.xcodeproj to your Main Project as a Library |
| 88 | + |
| 89 | +- Add AMap SDK to your project. AMap official tutorial is [here](http://lbs.amap.com/api/ios-location-sdk/guide/crest-project/manual-configuration/) |
| 90 | + |
| 91 | +- AppDelegate.m |
| 92 | + |
| 93 | +``` |
| 94 | +... |
| 95 | +#import <AMapFoundationKit/AMapFoundationKit.h> //引入高德地图核心包 |
| 96 | +... |
| 97 | +- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions |
| 98 | +{ |
| 99 | +
|
| 100 | + [AMapServices sharedServices].apiKey = @"请填写您的key"; |
| 101 | + ... |
| 102 | +} |
| 103 | +... |
| 104 | +``` |
| 105 | + |
| 106 | +## 3. API |
| 107 | + |
| 108 | +``` |
| 109 | +import EleRNLocation from 'ele-react-native-location'; |
| 110 | +``` |
| 111 | + |
| 112 | +### 3.1 Start Location |
| 113 | + |
| 114 | +``` |
| 115 | +EleRNLocation.startLocation(options); |
| 116 | +``` |
| 117 | + |
| 118 | +The parameter for startLocation(options) can be varied on different platforms which is showed as following: |
| 119 | + |
| 120 | +#### Android Options and Default Value |
| 121 | + |
| 122 | +``` |
| 123 | +{ |
| 124 | + accuracy: 'HighAccuracy', // BatterySaving(低功耗定位模式), DeviceSensors(仅设备定位模式), HighAccuracy(高精度模式) |
| 125 | + needAddress: true, // 设置是否返回地址信息 |
| 126 | + onceLocation: false, // 是否只定位一次 |
| 127 | + onceLocationLatest: false,//获取最近3s内精度最高的一次定位结果 |
| 128 | + wifiActiveScan: true, // 设置是否强制刷新WIFI,默认为强制刷新,模式为仅设备模式(Device_Sensors)时无效 |
| 129 | + mockEnable: false, // 设置是否允许模拟位置,默认为false,不允许模拟位置,模式为低功耗模式(Battery_Saving)时无效 |
| 130 | + interval: 2000, // 设置定位间隔,单位毫秒,默认为2000ms |
| 131 | + httpTimeOut: 30000, // 设置联网超时时间(ms), 模式为仅设备模式(Device_Sensors)时无效,默认30000毫秒,建议超时时间不要低于8000毫秒, |
| 132 | + protocol:'http', //用于设定网络定位时所采用的协议,提供http/https两种协议,默认值http |
| 133 | + locationCacheEnable: false //true表示使用定位缓存策略;false表示不使用。默认是false |
| 134 | +} |
| 135 | +``` |
| 136 | + |
| 137 | +#### iOS Options and Default Value |
| 138 | + |
| 139 | +``` |
| 140 | +{ |
| 141 | + accuracy: 'kCLLocationAccuracyHundredMeters', // kCLLocationAccuracyHundredMeters, kCLLocationAccuracyBest, kCLLocationAccuracyNearestTenMeters,kCLLocationAccuracyKilometer,kCLLocationAccuracyThreeKilometers |
| 142 | + onceLocation: false, // 是否只定位一次, |
| 143 | + pausesLocationUpdatesAutomatically: true,//指定定位是否会被系统自动暂停。默认为YES |
| 144 | + allowsBackgroundLocationUpdates: false,//是否允许后台定位。默认为NO。只在iOS 9.0及之后起作用。设置为YES的时候必须保证 Background Modes 中的 Location updates 处于选中状态,否则会抛出异常 |
| 145 | + locationTimeout: 10,//指定单次定位超时时间,默认为10s。最小值是2s。注意单次定位请求前设置 |
| 146 | + reGeocodeTimeout: 5,//指定单次定位逆地理超时时间,默认为5s。最小值是2s。注意单次定位请求前设置 |
| 147 | + locatingWithReGeocode: false,//连续定位是否返回逆地理信息,默认NO |
| 148 | + distanceFilter: 'kCLDistanceFilterNone'//设定定位的最小更新距离。默认为 kCLDistanceFilterNone |
| 149 | +} |
| 150 | +``` |
| 151 | + |
| 152 | + |
| 153 | +More config options detail can he found [here](http://lbs.amap.com/api/android-location-sdk/guide/android-location/getlocation/#configure) |
| 154 | + |
| 155 | +### 3.2 Stop Location |
| 156 | + |
| 157 | +``` |
| 158 | +EleRNLocation.stopLocation(); |
| 159 | +``` |
| 160 | + |
| 161 | +### 3.3 Destroy Location |
| 162 | + |
| 163 | +``` |
| 164 | +EleRNLocation.destroyLocation(); |
| 165 | +``` |
| 166 | + |
| 167 | +### 3.4 Add Location Update Listener |
| 168 | + |
| 169 | +``` |
| 170 | +EleRNLocation.addEventListener((data) => console.log('data', data)); |
| 171 | +``` |
| 172 | + |
| 173 | +#### Result Received from Event Listener |
| 174 | + |
| 175 | +``` |
| 176 | +{ |
| 177 | + "gpsStatus": -1, (Android only) |
| 178 | + "locationDetail": "", (Android only) |
| 179 | + "district": "", |
| 180 | + "city": "", |
| 181 | + "street": "", |
| 182 | + "aoiName": "", |
| 183 | + "poiName": "", |
| 184 | + "province": "", |
| 185 | + "locationType": 1, (Android only) |
| 186 | + "latitude": 36.669221634428474, |
| 187 | + "altitude": 29.78, |
| 188 | + "cityCode": "", |
| 189 | + "streetNum": "", |
| 190 | + "bearing": 0, (Android only) |
| 191 | + "accuracy": 1, (Android only) |
| 192 | + "horizontalAccuracy": 1, (iOS only) |
| 193 | + "verticalAccuracy": 1, (iOS only) |
| 194 | + "speed": 0, (Android only) |
| 195 | + "longitude": 117.0259247042361, |
| 196 | + "adCode": "", |
| 197 | + "country": "", |
| 198 | + "address": "" |
| 199 | +} |
| 200 | +``` |
| 201 | + |
| 202 | +Result detail can be found [here](http://lbs.amap.com/api/android-location-sdk/guide/android-location/getlocation/#result) |
| 203 | + |
| 204 | +*tips*: The k-v in the result maybe contains "", 0 since certain values are exclusive which are varied with different options. |
| 205 | + |
| 206 | +#### Handling Errors |
| 207 | + |
| 208 | +Location update listener will receiver error when there is something unexpected happened. |
| 209 | + |
| 210 | +``` |
| 211 | +{ |
| 212 | + errorCode: 2, |
| 213 | + errorInfo: 'WIFI信息不足 请到http://lbs.amap.com/api/android-location-sdk/abouterrorcode/查看错误码说明.' |
| 214 | +} |
| 215 | +``` |
| 216 | + |
| 217 | +Amap provide a full [table](http://lbs.amap.com/api/android-location-sdk/guide/utilities/errorcode/) of error code and it's detail info. |
| 218 | + |
| 219 | +## 4. Example |
| 220 | + |
| 221 | +``` |
| 222 | +/** |
| 223 | + * Sample React Native App |
| 224 | + * https://github.com/facebook/react-native |
| 225 | + * @flow |
| 226 | + */ |
| 227 | +
|
| 228 | +import React, { Component } from 'react'; |
| 229 | +import { |
| 230 | + AppRegistry, |
| 231 | + StyleSheet, |
| 232 | + Text, |
| 233 | + View |
| 234 | +} from 'react-native'; |
| 235 | +
|
| 236 | +import EleRNLocation from 'ele-react-native-location'; |
| 237 | +
|
| 238 | +
|
| 239 | +export default class LocationExample extends Component { |
| 240 | + render() { |
| 241 | + return ( |
| 242 | + <View style={styles.container}> |
| 243 | + <Text style={styles.welcome}> |
| 244 | + Welcome to React Native! |
| 245 | + </Text> |
| 246 | + <Text style={styles.instructions}> |
| 247 | + To get started, edit index.android.js |
| 248 | + </Text> |
| 249 | + <Text style={styles.instructions}> |
| 250 | + Double tap R on your keyboard to reload,{'\n'} |
| 251 | + Shake or press menu button for dev menu |
| 252 | + </Text> |
| 253 | + </View> |
| 254 | + ); |
| 255 | + } |
| 256 | +
|
| 257 | + componentDidMount() { |
| 258 | + this.listener = EleRNLocation.addEventListener((data) => console.log('data', data)); |
| 259 | + // for Android (iOS options is different) |
| 260 | + EleRNLocation.startLocation({ |
| 261 | + accuracy: 'HighAccuracy', |
| 262 | + mockEnable: true, |
| 263 | + interval: 5000 |
| 264 | + }); |
| 265 | + } |
| 266 | +
|
| 267 | + componentWillUnmount() { |
| 268 | + EleRNLocation.stopLocation(); |
| 269 | + this.listener.remove(); |
| 270 | + } |
| 271 | +} |
| 272 | +
|
| 273 | +const styles = StyleSheet.create({ |
| 274 | + container: { |
| 275 | + flex: 1, |
| 276 | + justifyContent: 'center', |
| 277 | + alignItems: 'center', |
| 278 | + backgroundColor: '#F5FCFF', |
| 279 | + }, |
| 280 | + welcome: { |
| 281 | + fontSize: 20, |
| 282 | + textAlign: 'center', |
| 283 | + margin: 10, |
| 284 | + }, |
| 285 | + instructions: { |
| 286 | + textAlign: 'center', |
| 287 | + color: '#333333', |
| 288 | + marginBottom: 5, |
| 289 | + }, |
| 290 | +}); |
| 291 | +
|
| 292 | +AppRegistry.registerComponent('LocationExample', () => LocationExample); |
| 293 | +``` |
| 294 | + |
| 295 | +## 5. Release Note |
| 296 | +- [*] 0.2.2 |
| 297 | + - 升级高德SDK iOS 基础framework 到 V1.3.4 |
| 298 | + - 升级高德SDK iOS 定位framework 到 V2.3.0 |
| 299 | + - Fix [bug](https://github.com/Eleme-IMF/dodo/issues/11) |
| 300 | +- [*] 0.2.1 |
| 301 | + - 升级高德SDK jar包到 V3.3 |
| 302 | + - Fix [bug](https://github.com/Eleme-IMF/dodo/issues/9) |
| 303 | +- [*] 0.2.0 |
| 304 | + - 兼容 RN 0.40 |
| 305 | + |
| 306 | + |
| 307 | +## 5. Any Help |
| 308 | + |
| 309 | +Issues and PR are welcomed! |
| 310 | + |
| 311 | +Support wantted? Please contact: |
| 312 | + |
| 313 | +- Android: [hongju.wang ]([email protected]) |
| 314 | + |
| 315 | +- iOS: [liangliang.gao ]([email protected]) |
0 commit comments