React native 如何使用expo location从用户的当前位置检索用户所在的城市？

我希望当用户出现在我的应用程序屏幕上时，从他们的当前位置获取城市信息

我曾尝试使用expo location中的

getCurrentPositionAsync

函数，但它不起作用

这是我正在尝试的代码：

     export default class Ranking extends Component {
      constructor(props) {
        super(props);
        this.state = {
          location: {},
          errorMsg:'',
          },
        };
      }
    
      _getLocationAsync = async () => {
        let { status } = await Permissions.askAsync(Permissions.LOCATION);
        if (status !== "granted") {
          this.setState({
            errorMsg: "Permission to access location was denied"
          });
        }
        let location = await Location.getCurrentPositionAsync({});
        this.setState({ location });
        };
    
      UNSAFE_componentWillMount() {
        this._getLocationAsync();
      }
    
      render() {
        let text = 'Waiting...';
         if (this.state.errorMsg) {
           text = this.state.errorMsg;
         } else if (location) {
           text = JSON.stringify(location);
       }
    
    return (
      <View>
         <Text>{text}</Text>
      </View>
        );
      }
    }

导出默认类扩展组件{
建造师（道具）{
超级（道具）；
此.state={
地点：{}，
errorMsg:“”，
},
};
}
_getLocationAsync=async（）=>{
让{status}=wait Permissions.askAsync（Permissions.LOCATION）；
如果（状态！=“已授予”）{
这是我的国家({
errorMsg：“访问位置的权限被拒绝”
});
}
let location=await location.getCurrentPositionAsync（{}）；
this.setState（{location}）；
};
不安全的_组件willmount（）{
这是。_getLocationAsync（）；
}
render（）{
让文本='等待…'；
if（this.state.errorMsg）{
text=this.state.errorMsg；
}else if（位置）{
text=JSON.stringify（位置）；
}
返回(
{text}
);
}
}

您可以使用

Location.reverseGeocodeAsync（Location）

功能获取一个邮政地址，该地址包含一个与您传入的位置相对应的

城市

字段

此函数将位置对象作为具有

纬度

和

经度

属性的参数

---

通过查看示例，您可以将

location.coords

作为参数传递给

location.reverseGeocodeAsync

，并检索城市名称，如下所示：

class Ranking extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      address: null,
      errorMsg: null,
    };
  }

  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      this.setState({
        errorMsg: 'Permission to access location was denied',
      });
    }
    const location = await Location.getCurrentPositionAsync({});
    const address = await Location.reverseGeocodeAsync(location.coords);
    this.setState({ address });
  };

  componentDidMount() {
    this._getLocationAsync();
  }

  render() {
    let text = 'Waiting...';
    if (this.state.errorMsg) {
      text = this.state.errorMsg;
    } else if (this.state.address) {
      text = this.state.address[0].city;
    }
    return (
      <View>
        <Text>{text}</Text>
      </View>
    );
  }
}

类排序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
地址：空，
errorMsg:null，
};
}
_getLocationAsync=async（）=>{
让{status}=wait Permissions.askAsync（Permissions.LOCATION）；
如果（状态！=“已授予”）{
这是我的国家({
errorMsg:'访问位置的权限被拒绝'，
});
}
const location=await location.getCurrentPositionAsync（{}）；
const address=wait Location.reverseGeocodeAsync（Location.coords）；
this.setState（{address}）；
};
componentDidMount（）{
这是。_getLocationAsync（）；
}
render（）{
让文本='等待…'；
if（this.state.errorMsg）{
text=this.state.errorMsg；
}else if（此.state.address）{
text=此.state.address[0]。城市；
}
返回(
{text}
);
}
}

---

同时使用

componentDidMount

代替

componentWillMount

<代码>组件将装载被视为“遗留”

---

.

您可以使用

Location.reverseGeocodeAsync（Location）

功能获取一个邮政地址，该地址具有与您传入的位置相对应的

city

字段

此函数将位置对象作为具有

纬度

和

经度

属性的参数

---

通过查看示例，您可以将

location.coords

作为参数传递给

location.reverseGeocodeAsync

，并检索城市名称，如下所示：

class Ranking extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      address: null,
      errorMsg: null,
    };
  }

  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      this.setState({
        errorMsg: 'Permission to access location was denied',
      });
    }
    const location = await Location.getCurrentPositionAsync({});
    const address = await Location.reverseGeocodeAsync(location.coords);
    this.setState({ address });
  };

  componentDidMount() {
    this._getLocationAsync();
  }

  render() {
    let text = 'Waiting...';
    if (this.state.errorMsg) {
      text = this.state.errorMsg;
    } else if (this.state.address) {
      text = this.state.address[0].city;
    }
    return (
      <View>
        <Text>{text}</Text>
      </View>
    );
  }
}

类排序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
地址：空，
errorMsg:null，
};
}
_getLocationAsync=async（）=>{
让{status}=wait Permissions.askAsync（Permissions.LOCATION）；
如果（状态！=“已授予”）{
这是我的国家({
errorMsg:'访问位置的权限被拒绝'，
});
}
const location=await location.getCurrentPositionAsync（{}）；
const address=wait Location.reverseGeocodeAsync（Location.coords）；
this.setState（{address}）；
};
componentDidMount（）{
这是。_getLocationAsync（）；
}
render（）{
让文本='等待…'；
if（this.state.errorMsg）{
text=this.state.errorMsg；
}else if（此.state.address）{
text=此.state.address[0]。城市；
}
返回(
{text}
);
}
}

---

同时使用

componentDidMount

代替

componentWillMount

<代码>组件将装载被视为“遗留”

---

.

感谢您回答我的问题并花时间解释。我使用了你的帮助来修改我的代码，但我的屏幕上仍然只有“等待…”（我用我的手机，而不是模拟器进行了尝试）你说你已经根据我的代码修改了自己的代码，但你是否也尝试过按原样呈现我的示例？因为我还更改了其他内容，比如状态和render中的if-else语句。如果

this.state.errorMsg

或

this.state.address

不为空，您将不会看到“正在等待…”。因此，如果您确实看到它，请注销

状态

，

位置

和

地址

，查看发生了什么。感谢您回答我并花时间解释。我使用了你的帮助来修改我的代码，但我的屏幕上仍然只有“等待…”（我用我的手机，而不是模拟器进行了尝试）你说你已经根据我的代码修改了自己的代码，但你是否也尝试过按原样呈现我的示例？因为我还更改了其他内容，比如状态和render中的if-else语句。如果

this.state.errorMsg

或

this.state.address

不为空，您将不会看到“正在等待…”。因此，如果您确实看到它，请注销

状态

，

位置

和

地址

，查看发生了什么。