无涯教程-React Native - 地理位置在本章中，我们将向您展示如何使用地理定位。 Method Descri

在本章中，我们将向您展示如何使用地理定位。

Method	Description
getCurrentPosition()	它使用最新的位置信息调用一次成功回调。
watchPosition()	每当位置更改时，它都会调用成功回调。它返回一个watchId（数字）。
clearWatch()	清除watchPosition（）的watchId。
stopObserving()	它停止观察设备位置更改，并删除以前注册的所有侦听器。
setRNConfiguration()	它设置配置选项，该选项将在所有位置请求中使用。
requestAuthorization()	它基于在pList上配置的密钥请求合适的位置许可。

步骤1 - App.js代码

import React from react
import GeolocationExample from ./geolocation_example.js
const App=() => {
return (
<GeolocationExample />
)
}
export default App

步骤2 - 地理位置

我们将从设置初始状态开始，以保持初始位置和最后位置。

现在，我们需要使用 navigator.geolocation.getCurrentPosition 安装组件时获取设备的当前位置，我们将对响应进行字符串化，以便我们更新状态。

navigator.geolocation.watchPosition 用于跟踪用户的位置，我们还可以在此步骤中清除观察者。

AsyncStorageExample.js

import React, { Component } from react
import { View, Text, Switch, StyleSheet} from react-native
class SwichExample extends Component {
state={
initialPosition: unknown,
lastPosition: unknown,
}
watchID: ?number=null;
componentDidMount=() => {
navigator.geolocation.getCurrentPosition(
(position) => {
const initialPosition=JSON.stringify(position);
this.setState({ initialPosition });
},
(error) => alert(error.message),
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
);
this.watchID=navigator.geolocation.watchPosition((position) => {
const lastPosition=JSON.stringify(position);
this.setState({ lastPosition });
});
}
componentWillUnmount=() => {
navigator.geolocation.clearWatch(this.watchID);
}
render() {
return (
<View style={styles.container}>
<Text style={styles.boldText}>
Initial position:
</Text>
        </span><span class="pun">&lt;</span><span class="typ">Text</span><span class="pun">&gt;</span><span class="pln">
           </span><span class="pun">{</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">state</span><span class="pun">.</span><span class="pln">initialPosition</span><span class="pun">}</span><span class="pln">
        </span><span class="pun">&lt;/</span><span class="typ">Text</span><span class="pun">&gt;</span><span class="pln">
        
        </span><span class="pun">&lt;</span><span class="typ">Text</span><span class="pln"> style</span><span class="pun">={</span><span class="pln">styles</span><span class="pun">.</span><span class="pln">boldText</span><span class="pun">}&gt;</span><span class="pln">
           </span><span class="typ">Current</span><span class="pln"> position</span><span class="pun">:</span><span class="pln">
        </span><span class="pun">&lt;/</span><span class="typ">Text</span><span class="pun">&gt;</span><span class="pln">
        
        </span><span class="pun">&lt;</span><span class="typ">Text</span><span class="pun">&gt;</span><span class="pln">
           </span><span class="pun">{</span><span class="kwd">this</span><span class="pun">.</span><span class="pln">state</span><span class="pun">.</span><span class="pln">lastPosition</span><span class="pun">}</span><span class="pln">
        </span><span class="pun">&lt;/</span><span class="typ">Text</span><span class="pun">&gt;</span><span class="pln">
     </span><span class="pun">&lt;/</span><span class="typ">View</span><span class="pun">&gt;</span><span class="pln">
  </span><span class="pun">)</span><span class="pln">

}
}
export default SwichExample
const styles=StyleSheet.create ({
container: {
flex: 1,
alignItems: center,
marginTop: 50
},
boldText: {
fontSize: 30,
color: red,
}
})

无涯教程-React Native - 地理位置

步骤1 - App.js代码

步骤2 - 地理位置

参考链接