آموزش موقعیت جغرافیایی در برنامه نویسی ریکت نیتیو

3 سال پیش

آموزش موقعیت جغرافیایی در برنامه نویسی ریکت نیتیو

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش موقعیت جغرافیایی در برنامه نویسی ریکت نیتیو خواهیم پرداخت.

در این درس، ما به شما نحوه استفاده از موقعیت جغرافیایی را نشان خواهیم داد.

مرحله ۱: App.js

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

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

مرحله ۲: موقعیت جغرافیایی

ما با تنظیم حالت اولیه شروع به کار می کنیم تا موقعیت اولیه و آخر را حفظ کند.

اکنون ، هنگام نصب یک م,لفه با استفاده از 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',
   }
})

منبع.

لیست جلسات قبل آموزش ریکت نیتیو

نویسنده مطلب erfan molaei

آموزش موقعیت جغرافیایی در برنامه نویسی ریکت نیتیو

آموزش موقعیت جغرافیایی در برنامه نویسی ریکت نیتیو

مرحله ۱: App.js

مرحله ۲: موقعیت جغرافیایی

AsyncStorageExample.js

لیست جلسات قبل آموزش ریکت نیتیو

دیدگاه شما

بدون دیدگاه

آموزش موقعیت جغرافیایی در برنامه نویسی ریکت نیتیو

مرحله ۱: App.js

مرحله ۲: موقعیت جغرافیایی

AsyncStorageExample.js

لیست جلسات قبل آموزش ریکت نیتیو

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه