Question

我正在构建react我的应用程序，以显示我正在使用react-native-map的用户在地图上的移动，并且每当用户单击start trip按钮时，我都会从navigator.geolocation.wathposition api和将坐标保存为redux状态，但是它触发了大约10 -15秒，甚至更多次，我尝试了 distanceFileter值[1,5,10] 但没有任何变化，因为{{1}地图上的}不能正确绘制。我是本机和编程的新手，请提出我要去哪里的问题。手表位置组件位于polyline下。

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>
 );
}

Answer 1

尝试

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

使用React Native的Geolocation watchPosition和redux存储坐标，坐标不会频繁且不准确地存储

1 个答案: