ตอบสนองดั้งเดิม - ตำแหน่งทางภูมิศาสตร์

ในบทนี้เราจะแสดงวิธีการใช้งาน 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',
   }
})