我正在构建反应本机应用程序以显示用户在地图上的移动，因为我使用react-native-map，当用户点击start trip按钮时，我正在记录navigator.geolocation.wathposition api的坐标并在redux状态下保存坐标，但它触发大约10 -15秒并且有时候，我尝试过distanceFileter值[1,5,10]，但没有变化，因为地图上的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>
);
}
地图屏幕组件如下：
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>
);
}
}
尝试
startWatchPosition = () => {
if (!this.watchId) {
this.watchId = navigator.geolocation.watchPosition(