آموزش کار با تصاویر در برنامه نویسی ریکت نیتیو

0 دیدگاه

در خدمت شما دوستان عزیز هستیم با آموزش کار با تصاویر در برنامه نویسی ریکت نیتیو از وب سایت آموزش برنامه نویسی سورس باران.

آموزش کار با تصاویر در برنامه نویسی React Native

در این جلسه ما درک می کنیم که چگونه با تصاویر در فریم ورک ریکت نیتیو کار می کنیم، خب وقت رو تلف نکنیم و زودتر بریم سراغ یاد گرفتن.

افزودن تصاویر در ریکت نیتیو

اجازه دهید یک پوشه 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

خروجی به شکل زیر می باشد :

کار با تصاویر در برنامه نویسی ریکت نیتیو

ضخامت صفحه یا Screen Density در ریکت نیتیو

ریکت نیتیو یک راه برای بهینه سازی تصاویر برای دستگاه های مختلف با استفاده از پسوند ۲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

خروجی به شکل زیر می باشد :

Network Images در ریکت نیتیو

منبع

لیست جلسات قبل آموزش React Native

React Native یا ریکت نیتیو چیست؟

آموزش React Native – نصب و تنظیم محیط React Native

آموزش App در React Native

آموزش کار با State در React Native

آموزش کار با کامپوننت Props در React Native

آموزش استایل دهی در برنامه نویسی React Native

آموزش flex در برنامه نویسی react native

آموزش لیست ویو در برنامه نویسی React Native

آموزش کار با TextInput در برنامه نویسی ریکت نیتیو

آموزش ScrollView در برنامه نویسی ریکت نیتیو

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

آموزش پروژه محور طراحی سایت با پایتون و جنگو مختص بازار کار

منبع : سورس باران
رمز فايل : www.sourcebaran.com
انتشار: ۱۶ شهریور ۱۳۹۹

آموزش کار با تصاویر در برنامه نویسی ریکت نیتیو

آموزش کار با تصاویر در برنامه نویسی React Native

افزودن تصاویر در ریکت نیتیو

ضخامت صفحه یا Screen Density در ریکت نیتیو

Network Images در ریکت نیتیو

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط