React Native - 地理位置

  • 简述

    在本章中,我们将向您展示如何使用Geolocation.
  • 第 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>
                
                <Text>
                   {this.state.initialPosition}
                </Text>
                
                <Text style = {styles.boldText}>
                   Current position:
                </Text>
                
                <Text>
                   {this.state.lastPosition}
                </Text>
             </View>
          )
       }
    }
    export default SwichExample
    const styles = StyleSheet.create ({
       container: {
          flex: 1,
          alignItems: 'center',
          marginTop: 50
       },
       boldText: {
          fontSize: 30,
          color: 'red',
       }
    })