React Native - Vị trí địa lý

Trong chương này, chúng tôi sẽ hướng dẫn bạn cách sử dụng Geolocation.

Bước 1: App.js

import React from 'react'
import GeolocationExample from './geolocation_example.js'

const App = () => {
   return (
      <GeolocationExample />
   )
}
export default App

Bước 2: Định vị địa lý

Chúng tôi sẽ bắt đầu bằng cách thiết lập trạng thái ban đầu để giữ vị trí ban đầu và cuối cùng.

Bây giờ, chúng ta cần có được vị trí hiện tại của thiết bị khi một thành phần được gắn kết bằng cách sử dụng navigator.geolocation.getCurrentPosition. Chúng tôi sẽ xâu chuỗi phản hồi để có thể cập nhật trạng thái.

navigator.geolocation.watchPositionđược sử dụng để theo dõi vị trí của người dùng. Chúng tôi cũng xóa những người theo dõi trong bước này.

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',
   }
})