۲۹
فروردین

جلسه ۱۱ : Images در فریم ورک React Native

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

سلام و وقت بخیر خدمت کاربران محترم پی وی لرن و دوستان عزیزی که با آموزش فریم ورک React Native همراه مون هستند. در جلسه قبل به چگونگی کار با ScrollView در React Native پرداختیم. حال در این قسمت از آموزش فریم ورک راکت نیتیو به کار با کار با Images در فریم ورک React Native خواهیم پرداخت. با ادامه مبحث همراه ما باشید.

کار با Images در فریم ورک React Native

در این فصل، ما درک می کنیم که چگونه با Images در فریم ورک React Native کار می کنیم.

افزودن Image

اجازه دهید یک پوشه img جدید در داخل پوشه src ایجاد کنیم. ما Image خود را (myImage.png) در داخل این پوشه اضافه خواهیم کرد.
ما Image را بر روی صفحه home نشان می دهیم.

App.js

مثال :

import React from 'react';
import ImagesExample from './ImagesExample.js'

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

import React from 'react';

import ImagesExample from './ImagesExample.js'

const App = () => {

return (

)

}

export default App

Image محلی را می توان با استفاده از syntax زیر استفاده کرد.

image_example.js

مثال :

import React, { Component } from 'react'
import { Image } from 'react-native'

const ImagesExample = () => (
   <Image source = {require('C:/Users/Tutorialspoint/Desktop/NativeReactSample/logo.png')} />
)
export default ImagesExample

import React, { Component } from 'react'

import { Image } from 'react-native'

const ImagesExample = () => (

)

export default ImagesExample

خروجی

تصاویر در فریم ورک React Native

ضخامت صفحه یا Screen Density

React Native یک راه برای بهینه سازی تصاویر برای دستگاه های مختلف با استفاده از پسوند ۲x, @3x@ را ارائه می دهد. برنامه فقط تصویر مورد نیاز برایScreen Density خاص را بارگذاری می کند.
در زیر نام تصویر در داخل پوشه img خواهد بود.

مثال :

my-image@2x.jpg
my-image@3x.jpg

1 2	my-image@2x.jpg my-image@3x.jpg

Network Images

هنگام استفاده از تصاویر شبکه یا Network Images، به جای require ، به ویژگی source نیاز داریم. توصیه می شود که عرض و ارتفاع تصاویر شبکه را تعیین کنید.

App.js

مثال :

import React from 'react';
import ImagesExample from './image_example.js'

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

import React from 'react';

import ImagesExample from './image_example.js'

const App = () => {

return (

)

}

export default App

image_example.js

مثال :

import React, { Component } from 'react'
import { View, Image } from 'react-native'

const ImagesExample = () => (
   <Image source = {{uri:'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'}}
   style = {{ width: 200, height: 200 }}
   />
)
export default ImagesExample

import React, { Component } from 'react'

import { View, Image } from 'react-native'

const ImagesExample = () => (

<Image source = {{uri:'https://pbs.twimg.com/profile_images/486929358120964097/gNLINY67_400x400.png'}}

style = {{ width: 200, height: 200 }}

)

export default ImagesExample

خروجی

تصاویر در فریم ورک React Native

کلام پایانی

در این قسمت از آموزش فریم ورک راکت نیتیو به کار با Images در فریم ورک React Native پرداختیم . در ادامه مباحث با HTTP در React Native همراه ما باشید.

QR: جلسه ۱۱ : Images در فریم ورک React Native

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۱۱ : Images در فریم ورک React Native

مقدمه

کار با Images در فریم ورک React Native

افزودن Image

App.js

image_example.js

خروجی

ضخامت صفحه یا Screen Density

Network Images

App.js

image_example.js

خروجی

کلام پایانی

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ