بخش های اصلی

آموزش React Native

React Native – MapView

در این بخش نحوه ی استفاده از mapها در React Native را آموزش میدیم.

ایجاد فایل

ابتدا src/components/home/MapViewExample.js را ایجاد می کنیم.

استفاده از Mapها

تعدادی prop به MapView اضافه می کنیم.

showsUserLocation و followUserLocation، از نوعِ boolean هستن. قبل از استفاده از آن ها، نیاز به اجازه (permission) کاربرها دارین.

با تنظیمِ zoomEnabled = {true}، قابلیت زوم را هم فعال می کنیم.

src/components/home/MapViewExample.js

مثال

import React, { Component } from 'react'
import {
   MapView,
   StyleSheet
} from 'react-native'

export default MapViewExample = (props) => {
   return (
      <MapView
         style = {styles.map}
         showsUserLocation = {false}
         followUserLocation = {false}
         zoomEnabled = {true}
      />
   )
}

const styles = StyleSheet.create ({
   map: {
      height: 400,
      marginTop: 80
   }
})

در پایان باید this را به کامپوننتِ HomeContainer پاس بدیم.

src/components/home/HomeContainer.js

مثال

import React, { Component } from 'react'
import { MapView } from 'react-native'
import MapViewExample from './MapViewExample'

export default class HomeContainer extends Component {

   constructor() {
      super();
   }
   render() {
      return (
         <MapViewExample/>
      );
   }
}

اگه خروجی را اجرا کنین، map را میبینین.

 

مبحث آموزشی

آموزش React Native

Learn React Native

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

آخرین مقالات

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد