रिएक्ट नेटिव - जियोलोकेशन

इस अध्याय में, हम आपको बताएंगे कि कैसे उपयोग करना है 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',
   }
})