如何解决有关 watchID 和 navigator.geolocation.getCurrentPosition 的类型错误？

Question

我得到的错误是：

TypeError: undefined 不是对象（正在计算 'navigator.geoLocation.watchPosition'>

这是我的代码：

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 评估为未定义。这个问题是因为没有声明watchID吗？

Answer 1

这里有几个问题。

您似乎同时使用了 getCurrentPosition 和 watchCurrentPosition。我会select一个。
您的 getCurrentPosition 在 componentDidMount 内，而您的 watchCurrentPosition 不在任何方法内。出于这个原因，它很可能被解释为 ES6 class 属性: https://babeljs.io/docs/plugins/transform-class-properties/。如果您没有安装链接的 Babel 插件，它将无法解释您的语法。
类似地，watchID 被解释为 ES6 class 属性（或者更确切地说，可能根本没有被解释）。没有上述插件，您不能在方法之外声明变量 - 当您这样做时，它们是 class 上的属性，而不是方法。

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

如何解决有关 watchID 和 navigator.geolocation.getCurrentPosition 的类型错误？

How do you resolve a TypeError concerning watchID and navigator.geolocation.getCurrentPosition?

javascript

geolocation

react-native

react-navigation

TypeError: undefined 不是对象（正在计算 'navigator.geoLocation.watchPosition'>