使用 React Native 的 Geolocation watchPosition 和 redux 存储坐标，坐标获取不频繁不准确答案

【问题标题】：Using React Native's Geolocation watchPosition and redux to store coordinates, coordinates not getting frequently and accurately使用 React Native 的 Geolocation watchPosition 和 redux 存储坐标，坐标获取不频繁不准确
【发布时间】：2018-07-04 13:13:42
【问题描述】：

我正在构建 react native 应用程序以在地图上显示用户移动，因为我正在使用 react-native-map 并且当用户单击 start trip 按钮时，我正在从 navigator.geolocation.wathposition api 记录坐标并将坐标保存在 redux 状态，但它会触发大约 10 -15 秒甚至更多时间，我尝试了 distanceFileter 值 [1,5,10] 但没有改变，因为地图上的 polyline 没有正确绘制.我是 react-native 和编程的新手，请提出我哪里出错了。观察位置组件放在drawer-navigation下。

my package.json :
"dependencies": {
"create-react-class": "^15.6.3",
"haversine": "^1.1.0",
"native-base": "^2.4.5",
"react": "16.3.1",
"react-native": "^0.55.4",
"react-native-maps": "^0.21.0",
"react-native-modal": "^6.1.0",
"react-native-vector-icons": "^4.6.0",
"react-navigation": "^2.3.1",
"react-redux": "^5.0.7",
"redux": "^4.0.0"
}

和我的手表位置组件如下：

class GetCoords extends Component {
constructor(props) {
super(props);
 this.state = {
   shadowOffsetWidth: 1,
   shadowRadius: 4,
   watchId: '',
   isTripStarted: false,
  };
}

componentWillUnmount() {
   stopWatchPosition();
}

startWatchPosition = () => {
if (this.state.watchId === '' || this.state.watchId === null) {
  let watchId = navigator.geolocation.watchPosition(this.getCoordinates, this.geo_error,
    {
      enableHighAccuracy: true,
      maximumAge: 0,
      timeout: 5000,
      // useSignificantChanges: true,
      distanceFileter: 10,
    });

  this.setState({ watchId, isTripStarted: true })
}
this.props.navigation.navigate("Map", { title: "location tracking started" });

 }

stopWatchPosition = () => {
  if (this.state.watchId >= 0 && this.state.watchId !== '') {
  navigator.geolocation.clearWatch(this.state.watchId);
  this.setState({ watchId: '', isTripStarted: false });
}
}


getCoordinates = (position) => {

 let curLocation = {
  latitude: position.coords.latitude,
  longitude: position.coords.longitude,
  latitudeDelta: 0.0122,
  longitudeDelta: Dimensions.get("window").width / 
  Dimensions.get("window").height * 0.0122,
}
this.props.locationChanged(curLocation) // saving coordinates in redux state 
draw a polyline in the map screen;
}

geo_error = (err) => {
console.log("GeoLocationError:: ", err);
alert("Sorry, problem in getting position.");
}

 render() {
return (
  <Container>
    <AppHeader title="Home" />

    <Content padder>
      <Card>
        <CardItem>
          <Body>
             <Button vertical  onPress={this.startWatchPosition}>
                <Text>Start Trip</Text>
             </Button>

              <Button vertical  onPress={this.stopWatchPosition}>
                <Text>Stop Trip</Text>
             </Button>
          </Body>
        </CardItem>
      </Card>

    </Content>
  </Container>
 );
}

Map Screen 组件如下：

class Map extends Component {
constructor(props) {
super(props);
}
 render() {
 if (this.props.mapLoading) {
  return (<Spinner />);

 }
 return (
  <Container>
    <AppHeader title="Map" />
     <View style={{ flex: 1 }}>
      <MapView
        style={styles.map}
        showsUserLocation
        showsMyLocationButton
        initialRegion={this.props.currLocation}
        region={this.props.currLocation}
      >
        <MapView.Polyline
          coordinates={this.props.markers.map((marker) => marker.coordinate)}
          strokeWidth={3}
        />
       </MapView>
    </View>
    </Container>
    );
  }
}

【问题讨论】：

标签： react-native react-navigation polyline react-native-maps

【解决方案1】：

试试

startWatchPosition = () => {
    if (!this.watchId) {
      this.watchId = navigator.geolocation.watchPosition(

【讨论】：

请编辑您的代码，如果您添加一些说明会很有帮助