geolib 在 react-native 状态下尚未准备好地理位置坐标

Posted 2023-02-23

【中文标题】geolib 在 react-native 状态下尚未准备好地理位置坐标

【英文标题】：Geolocation coordinates are not ready by geolib in a react-native state

【发布时间】：2017-10-09 01:19:06

【问题描述】：

我在 react-native 上使用 geolib 并将其与地理位置集成。我想获取从我当前位置的纬度/经度到另一个位置的纬度/经度的距离。当我这样做时，它会弹出错误：null is not an object (evalating 'point.hasOwnProperty'。关于修复的任何想法？

componentDidMount() 
navigator.geolocation.getCurrentPosition(
  (position) => 
    this.setState(
      latitude: position.coords.latitude,
      longitude: position.coords.longitude,
      error: null,
    );
  
);


render() 

const lat = this.state.latitude;
const long = this.state.longitude;

let c = geolib.getDistance(
latitude: lat, longitude: long, //error occurs HERE
latitude: 36.204824, longitude: 138.252924
);

return (
    <Text>Distance: c kms</Text>
);

【问题讨论】：

你解决这个丹妮丝了吗？

你的代码对我有用，谢谢

【参考方案1】：

这可能是因为以下是异步的，这意味着它会在其他所有内容都已加载后给出结果：

navigator.geolocation.getCurrentPosition(
  (position) => 
    this.setState(
      latitude: position.coords.latitude,
      longitude: position.coords.longitude,
      error: null,
    );
  
);

第一次渲染时，this.state.latitude 将为空：

const lat = this.state.latitude;
const long = this.state.longitude;

尝试在 render() 方法的开头添加这个：

if (this.state.latitude == null) return null;

这将阻止第一次渲染。第二次渲染时，this.state.latitude 将准备就绪。