React Native – Bài 23 Geolocation (định vị)

Trong chương này, chúng tôi sẽ chỉ cho bạn cách sử dụng Geolocation (định vị).

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ý

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

Bây giờ, chúng ta cần lấy vị trí hiện tại của thiết bị khi một thành phần được gắn bằng cách sử dụng navigator.geolocation.getCurrentPosition . Chúng tôi sẽ xâu chuỗi phản hồi để chúng tô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',
   }
})