用高德地图获取位置并自动获取天气 react-native-smart-amap-location

本模块讲述的是自动获取当前位置，并获取当前天气

 

思路：1.获取到当前位置；2.根据当前位置去获取天气

第一步：获取到当前位置

我这里用的是高德地图react-native-smart-amap-location这个组件获取当前位置

具体操作：

Android部分：

需要用到两个组件，

安装：

npm install react-native-smart-amap-location --save

npm install react-native-smart-app-event-listener-enhance --save

配置：

1.在 android\settings.gradle 中添加

include ':react-native-smart-amap-location'
project(':react-native-smart-amap-location').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-smart-amap-location/android')

2.在 android\app\build.gradle 中

dependencies {
    compile project(':react-native-smart-amap-location')//添加此行
    
}

3.在 MainApplication.java 中 添加

import com.reactnativecomponent.amaplocation.RCTAMapLocationPackage;//添加此行

.............

@Override
protected List getPackages() {
  return Arrays.asList(
      ..........
        new RCTAMapLocationPackage(),//添加此行
       .......
  );
}

4.在 AndroidManifest.xml 中添加权限

 并 在 application 中添加如下代码，并把从  高德地图API申请的key   填写到下面value处

可能出现的错误：

1.No resource found that matches the given name: attr 'android:keyboardNavigationCluster'

解决方法：

到相应组件的 android\bulid.gradle 中 ，改为26 及 26.0.1

compileSdkVersion 26
buildToolsVersion "26.0.1"

和 依赖也改为 26.0.1

dependencies {
    compile 'com.android.support:appcompat-v7:26.0.1'
}

2.在运行中可能出现一个在 node_modules\react-native-smart-amap-location\android\src\main\java\com\reactnativecomponent\amaplocation\RCTAMapLocationPackage.java  中 第22行  @Override  的错误，

此时需要将 这个方法删掉即可

例子代码：

import React, { Component } from 'react';
import {
    View, TextInput, Keyboard, Text, KeyboardAvoidingView, Image, StyleSheet, NetInfo, Platform, Alert,
    ImageBackground, ScrollView, DeviceEventEmitter, TouchableOpacity, StatusBar,
    NativeAppEventEmitter, ProgressBarAndroid, ActivityIndicator, Dimensions
} from 'react-native';
import { InputItem, Button, WingBlank, Toast, Checkbox, Modal } from 'antd-mobile-rn';
import AMapLocation from 'react-native-smart-amap-location';
import AppEventListenerEnhance from 'react-native-smart-app-event-listener-enhance'
const duration = 20000;

//fetch扩展,加入超时功能.
const fetchPlus = (url, config) => {
    let fetch_promise = fetch(url, config);
    let time_promise = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject(new Error('请求超时'));
        }, duration);
    });
    return Promise.race([fetch_promise, time_promise]);
}
const width = Dimensions.get('window').width;

class Test extends Component {
    static navigationOptions = ({navigation,screenProps}) => ({
        // 这里面的属性和App.js的navigationOptions是一样的。
        header : null
    });
    constructor(props) {
        super(props);
        this.state = {
            addLoading:true,
            weaLoading:true,
            address:'',
            weather:'',
        };

    }
    async show(district){
        console.log("地区;",district);
        try{
            let url = `http://wthrcdn.etouch.cn/weather_mini?city=${district}`;
            let response = await fetchPlus(url);
            let result = await response.json();
            console.log("singleGetList result:",result);
            debugger;
            this.setState({
                weather:result,
                weaLoading:false,
            })
            return result;
        }catch (e){
            Toast.info('发生未知错误')
            this.setState({
                weaLoading:false,
            })
        }

    }
    componentDidMount() {

        AMapLocation.init(null);

        this._showReGeocode();

        this.addAppEventListener(
            NativeAppEventEmitter.addListener('amap.location.onLocationResult', this._onLocationResult)
        )
    }
    componentWillUnmount () {
        //停止并销毁定位服务
        AMapLocation.cleanUp()
    }
    //单次定位并返回逆地理编码信息
    _showReGeocode = () => {
        console.log("bbbbbbbbb");
        this.setState({
            loading: true,
        })
        AMapLocation.getReGeocode()
    }
     _onLocationResult = (result) => {
         this.setState({
             addLoading:false,
         })
        if(result.error) {
            Alert.alert(`错误代码: ${result.error.code}, 错误信息: ${result.error.localizedDescription}`)
        }
        else {
            if(result.formattedAddress) {
                console.log("地址："+result.city+"-"+result.district);
                let r ='';
                if(result.district){
                     r= this.show(result.district);
                }else{
                     r= this.show(result.city);
                }
                this.setState({
                    address:result,
                    addLoading:false,
                })
            }
            else {
                Alert.alert(`纬度 = ${result.coordinate.latitude}, 经度 = ${result.coordinate.longitude}`)
            }
        }

    }
    showWeather(item,key){
        console.log("aaa")
        if(key!==0){
            return(
                
                    

                            {item.date}

                            {item.type}

                            {item.high.split(' ')[1]+' / '+item.low.split(' ')[1]}

                    
                    
                
            )
        }
    }

    render() {
        let address = this.state.address;
        let weather = this.state.weather;
        debugger
        return (
            
                
                    {
                        this.state.addLoading?
                            
                            
                                定位中......
                            
                            :
                            
                                {address!==''&&(address.city+"-"+address.district)}
                            
                    }
                
                
                    {
                        !this.state.weaLoading?
                            
                                
                                    {weather!==''&&weather.data.wendu+' ℃'}
                                
                                
                                    {weather!==''&&weather.data.forecast[0].type}
                                
                                
                                    {weather!==''&&weather.data.forecast[0].high.split(' ')[1]+' / '+weather.data.forecast[0].low.split(' ')[1]}
                                
                                
                                    {weather!==''&&weather.data.forecast[0].fengxiang+weather.data.forecast[0].fengli.split(']')[0].slice(9)}
                                
                                
                                    {weather!==''&&weather.data.ganmao}
                                
                            
                            :
                            
                                
                                正在获取天气......
                            
                    }
                
                
                    
                    {
                        weather!==''&& weather.data.forecast.map((item,key)=> this.showWeather(item,key))
                    }
                
            
        );
    }
}

export default AppEventListenerEnhance(Test);