如何解决有关watchID和navigator.geolocation.getCurrentPosition的TypeError？

Question

我得到的错误是：

TypeError：undefined不是对象（评估'navigator.geoLocation.watchPosition'＆gt;

这是我的代码：

import React from 'react';
import { Dimensions, StyleSheet, Text, View } from 'react-native';
import { StackNavigator } from 'react-navigation';
import {Container, Header, Button, Body, Icon, Content, Item, Form, Input } from 'native-base';
import MapView from 'react-native-maps';

const {width, height} = Dimensions.get('window');
const SCREEN_HEIGHT = height
const SCREEN_WIDTH = width
const ASPECT_RATIO = width / height
const LATITUDE_DELTA = 0.922
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO

export default class DriverMapScreen extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      initialPosition: {
        latitude: 0,
        longitude: 0,
        latitudeDelta: 0,
        longitudeDelta: 0
      },
      markerPosition: {
        latitude: 0,
        longitude: 0
      }
    }
  }

  watchID: ?number = null

  componentDidMount() {
    this.watchID = navigator.geolocation.getCurrentPosition((position) => {
      let lat = parseFloat(position.coords.latitude)
      let long = parseFloat(position.coords.longitude)

      let initialRegion = {
        latitude: lat,
        longitude: long,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta:LONGITUDE_DELTA
      }

    this.setState({initialPosition: initialRegion})
    this.setState({markerPosition: initialRegion})
  },
  (error) => alert(JSON.stringify(error)),
  {enableHighAccuracy: true, timeout: 20000, maximumAge: 1000})

  watchID = navigator.geoLocation.watchPosition((position) => {
    let lat = parseFloat(position.coords.latitude)
    let long = parseFloat(position.coords.longitude)

    let lastRegion = {
      latitude: lat,
      longitude: long,
      longitudeDelta: LONGITUDE_DELTA,
      latitudeDelta: LATITUDE_DELTA
    }

    this.setState({initialPosition: lastRegion})
    this.setState({markerPosition: lastRegion})
  })
}

  componentWillUnmount() {
    navigator.geoLocation.clearWatch(this.watchID)
  }


  render(){
    return (
      <View style={styles.container}>
        <MapView style={styles.map}
          region={this.state.initialPosition}
          loadingEnabled={true}
          loadingIndicatorColor={'#3a9def'}
        >

          <MapView.Marker
            coordinate={this.state.markerPosition}
            title={"title"}
            description={"description"}
          >
              <View style={styles.radius}>
                <View style={styles.marker} />
              </View>
          </MapView.Marker>
        </MapView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0
  },
  radius: {
    height: 50,
    width: 50,
    borderRadius: 50 / 2,
    overflow: 'hidden',
    backgroundColor: 'rgba(0, 122, 255, 0.1)',
    borderWidth: 1,
    borderColor: 'rgba(0, 122, 255, 0.3)',
    alignItems: 'center',
    justifyContent: 'center'
  },
  marker: {
    height: 20,
    width: 20,
    borderWidth: 3,
    borderColor: 'white',
    borderRadius: 20 / 2,
    overflow: 'hidden',
    backgroundColor: '#007AFF'
  }
})  

错误将此行指定为错误的来源：

watchID: ?number = null

你们有什么想法我的问题是什么？我观看的代码导致了工作代码，我只是不太清楚为什么我的watchID评估为undefined。这个问题是由于缺少声明watchID吗？

Answer 1

这里有几个问题。

1. 您似乎同时使用getCurrentPosition和watchCurrentPosition。我会选择一个。

2. 您的getCurrentPosition位于componentDidMount内，而您的watchCurrentPosition不在任何方法内。出于这个原因，它可能被解释为ES6类属性：https://babeljs.io/docs/plugins/transform-class-properties/。如果您没有链接的Babel插件设置，它将无法解释您的语法。

3. 同样，watchID被解释为ES6类属性（或者更确切地说，可能根本不被解释）。如果没有上面的插件，就不能在方法之外声明变量 - 当你这样做时，它们是类的属性，而不是方法。

您想要做的是在this.watchID内声明componentDidMount。然后，您应该可以从其他方法访问它。看看this Expo snack - 我认为它应该达到你想要的效果。