reactjs - react-native 中未触发方法
问题描述
我是 react-native 的新手,所以请帮助我。
假设我有 2 个屏幕。屏幕 A 和屏幕 B。在屏幕 A 中Geolocation.watchPosition()
,每 20 秒使用一次获取位置。当我导航到屏幕 B 时,仍在获取位置。假设我在 redux 中更新了一个值并且位置服务停止了。稍后我更新了 redux 值,以便可以恢复位置服务。redux 值已更新,但位置服务未恢复。请记住,那时我可能在屏幕 B 中。
componentWillReceiveProps(nextProps, nextState) {
if (nextProps.updateServices != this.props.updateServices) {
if ( this.props.updateServices === Y) {
__DEV__ && console.log("HERE HERE");
this.gpsInterval = setInterval(() => {
Geolocation.getCurrentPosition(info => {
const latitude = info.coords.latitude;
const longitude = info.coords.longitude;
RouteData.latitude = latitude;
RouteData.longitude = longitude;
this.props.updateUserLocation({ latitude, longitude });
this.setState(
{
latitude: latitude,
longitude: longitude,
latitudeDelta: 0.005,
longitudeDelta: 0.01,
showLocationStatus: false
},
() => {
this.gotLocation = true;
clearInterval(this.gpsInterval);
if (!this.venueDone) this.getAllVenues(latitude, longitude);
}
);
});
}, 3000);
}
}
}
这就是我尝试从屏幕 B 更新屏幕 A 中的位置服务的方式。我正在获取日志HERE HERE
,但未检测到位置更改。
编辑 1
屏幕 A
class HomeMapView extends React.Component {
constructor(props) {
super(props);
this.state = {
showLocationStatus: true
};
}
getCurrentPosition = (currentLatitude, currentLongitude) => {
console.log("Lat: " + currentLatitude + " Long: " + currentLongitude);
RouteData.latitude = currentLatitude;
RouteData.longitude = currentLongitude;
this.props.updateGpsPosition({
latitude: currentLatitude,
longitude: currentLongitude
});
// if (!this.venueDone) {
// this.setState(
// {
// latitude: currentLatitude,
// longitude: currentLongitude,
// latitudeDelta: 0.005,
// longitudeDelta: 0.01
// },
// () => {
// this.getAllVenues(currentLatitude, currentLongitude);
// }
// );
// }
};
enableLocationService() {
console.log("REACHED HERE");
this.locationListener = Geolocation.watchPosition(
position => {
__DEV__ && console.log("LOCATION CHANGED");
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
this.props.updateUserLocation({
latitude,
longitude
});
this.getCurrentPosition(latitude, longitude);
},
error => {
console.log("error" + JSON.stringify(error));
RNAndroidLocationEnabler.promptForEnableLocationIfNeeded({
interval: 20000,
fastInterval: 50000
})
.then(data => {
showAlert(
"FETCHING ...",
"Getting Data Please wait a moment",
"success");
onCurrentLocationClicked(this.getCurrentPosition);
})
.catch(err => {
showAlert(
"GPS Failed",
"Problem in enabling GPS please enable gps",
"danger");
});
}, {
fastestInterval: 10000,
interval: 10000,
enableHighAccuracy: true,
distanceFilter: 0
});
}
disableLocationService() {
Geolocation.clearWatch(this.locationListener);
}
componentDidMount() {
this.gpsInterval = setInterval(() => {
Geolocation.getCurrentPosition(info => {
const latitude = info.coords.latitude;
const longitude = info.coords.longitude;
RouteData.latitude = latitude;
RouteData.longitude = longitude;
this.props.updateUserLocation({
latitude,
longitude
});
this.setState({
latitude: latitude,
longitude: longitude,
latitudeDelta: 0.005,
longitudeDelta: 0.01,
showLocationStatus: false
},
() => {
this.gotLocation = true;
clearInterval(this.gpsInterval);
if (!this.venueDone)
this.getAllVenues(latitude, longitude);
});
});
}, 3000);
}
componentWillReceiveProps(nextProps, nextState) {
if (nextProps.locationService != this.props.locationService) {
if (nextProps.locationService === "Y") {
__DEV__ && console.log("LOCATION SERVICE ENABLED");
this.enableLocationService();
} else if (nextProps.locationService === "N") {
__DEV__ && console.log("LOCATION SERVICE DISABLED");
this.disableLocationService();
}
}
//added to enable location services after exit venue
if (nextProps.enterVenue != this.props.enterVenue) {
if (!nextProps.enterVenue && this.props.locationService === Y) {
__DEV__ && console.log("HERE HERE");
this.gpsInterval = setInterval(() => {
Geolocation.getCurrentPosition(info => {
const latitude = info.coords.latitude;
const longitude = info.coords.longitude;
RouteData.latitude = latitude;
RouteData.longitude = longitude;
this.props.updateUserLocation({
latitude,
longitude
});
this.setState({
latitude: latitude,
longitude: longitude,
latitudeDelta: 0.005,
longitudeDelta: 0.01,
showLocationStatus: false
},
() => {
this.gotLocation = true;
clearInterval(this.gpsInterval);
if (!this.venueDone)
this.getAllVenues(latitude, longitude);
});
});
}, 3000);
}
}
}
}
const mapStateToProps = state => ({
locationService: state.settings.locationService,
enterVenue: state.venues.enterVenues
});
const mapDispatchToProps = dispatch => ({
upateLocationService: data => dispatch(upateLocationService(data)),
});
export default connect(
mapStateToProps,
mapDispatchToProps)(HomeMapView);
任何帮助表示赞赏。
提前致谢。
解决方案
推荐阅读
- react-native - 问题图标显示 BottomTabNav React-native
- laravel - 雄辩的查询错误达到'256'的最大函数嵌套级别,中止
- amazon-redshift - Redshift 集群中的节点数和分片数
- javascript - 从所有 Firebase 文档中获取纬度和经度数据
- asp.net-core - 基于策略的授权 - Auth0 身份验证 - 始终返回 Forbidden 403
- substrate - 你如何使用 Polkadot JS API 格式化余额?
- c# - 使用后端服务器端 c# 从浏览器获取查询字符串变量
- arcgis - 加载图层时,图形中的某些点丢失
- nginx - nginx 反向代理背后的 Keycloak:SAML 集成 invalid_destination
- react-native - 如何从 React-Native 中的 API 获取数据?