使用Mapview进行本机编译时应用崩溃

时间:2019-05-10 10:08:03

标签: react-native

    import React, {Component} from 'react';
    import {Platform,StyleSheet,Text,View,TouchableOpacity,Alert,Image,Button} from 'react-native';
    import { Dialog } from 'react-native-simple-dialogs';
    import AsyncStorage from '@react-native-community/async-storage';
    import {KeyboardAvoidingView} from 'react-native';

    import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
    import datum from './data';
    import { Marker } from 'react-native-maps';
    import Parse from "parse/react-native";


    import Geolocation from 'react-native-geolocation-service';
    import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
    const homePlace = { description: 'Home', geometry: { location: { lat: 48.8152937, lng: 2.4597668 } }};
    const workPlace = { description: 'Work', geometry: { location: { lat: 48.8496818, lng: 2.2940881 } }};


    export default class Home extends React.Component{

      constructor(props) {
      super(props);

         this.state = {
           lat:13.0474878,
           long:80.0689267,
           picklat:0,
           picklong:0,
           droplat:0,
           droplong:0,
           curautostate:'pick',
           curautostateplaceholder:'Enter your pick up location',
           distance:0

         }

       }

      componentDidMount() {

        Geolocation.requestAuthorization();

               Geolocation.getCurrentPosition(
                   (position) => {

                          this.setState({lat: position.coords.latitude});
                          this.setState({long: position.coords.longitude});

                          this.setState({picklat: position.coords.latitude});
                          this.setState({picklong: position.coords.longitude});

                          this.setState({droplat: position.coords.latitude});
                          this.setState({droplong: position.coords.longitude});

               console.log("lat", this.state.lat);
                  console.log("long", this.state.long);

                   },
                   (error) => {
                       // See error code charts below.
                       console.log(error.code, error.message);


                       Alert.alert(
      'Please enable the location service',
      error.message,
      [

        {text: 'OK', onPress: () => console.log('has to exit')},
      ],
      {cancelable: false},
    );
                   },
                   { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
               );


        }


        carCalled=(number)=>{

    return fetch(`https://maps.googleapis.com/maps/api/distancematrix/json?origins=${this.state.picklat},${this.state.picklong}&destinations=${this.state.droplat},${this.state.droplong}&key=AIzaSyAGZXb2kgT5myfDuGAw7w5s9wc9IOCYyHc`)
        .then((response) => response.json())
        .then((responseJson) => {


         this.setState({distance:responseJson.rows[0].elements[0].distance.value/1000})

    console.log('sd',this.state.distance);

         if(this.state.distance<=1||this.state.distance>60){

      Alert.alert('Please select valid location')

    }else {


    }

        })
        .catch((error) =>{
        Alert.alert(error)
        });



        }

        toogleauto=()=>{
    if(this.state.curautostate=='pick'){
     this.setState({curautostate:'drop'})
     this.setState({curautostateplaceholder:'Enter your drop location'})


    }else if(this.state.curautostate=='drop'){
     this.setState({curautostate:'pick'})
       this.setState({curautostateplaceholder:'Enter your pick location'})

    }else {

    }

    }

      render() {
        return (

        <View style={{backgroundColor:datum.placeholderTextColor}}>
        <MapView
        provider={PROVIDER_GOOGLE}
                 style={{flex:1,height:'50%'}}
                 region={{
                   latitude: this.state.lat,
                   longitude:this.state.long,
                   latitudeDelta: 0.0922,
                   longitudeDelta: 0.0421
                 }}
                 showsUserLocation={true}
               />

        </View>
   ;
      }



    }



    const styles = StyleSheet.create({
      container:{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
      },
      welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });

Error

我正在尝试使用android模拟器运行该应用程序,当我运行该应用程序时会崩溃,并且在屏幕快照中看到它说喜欢的日志,但是当在没有地图视图的情况下运行该应用程序时,该应用程序运行正常,但我没有地图视图会发生什么情况,有人可以帮我解决过去三天来遇到的这种问题

0 个答案:

没有答案