بخش های اصلی

آموزش React Native

React Native – عکس ها

در این بخش نحوه ی کار با عکس ها در Reat Native را توضیح میدیم.

اضافه کردن عکس

ابتدا در فولدرِ src، فولدر جدیدی با نامِ img ایجاد کنین. عکس ها را (my-image.png) در این پوشه قرار بدین.

می توانید با استفاده از دستور زیر به عکس ها دسترسی پیدا کنین.

src/components/myComponent/MyPresentationalComponent.js

دستور

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

export default MyPresentationalComponent = (props) => (
   <Image source = {require('../../img/my-image.png')} />
)

چگالیِ صفحه نمایش

React Native جهت بهینه سازی عکس ها برای دستگاه های مختلف، با استفاده از پسوندهایِ @2x و @3x، روش خوبی را ارائه میده.

در ادامه نام عکس ها ی داخل پوشه ی img را مشاهده می کنین.

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

عکس های اینترنتی

وقتی از عکس های اینترنتی استفاده می کنین، بجای require باید از پراپرتیِ source استفاده کنین. بهترین روش اینه که برای این نوع عکس ها width و height را تعریف کنین.

src/components/myComponent/MyPresentationalComponent.js

مثال

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

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

مبحث آموزشی

آموزش React Native

Learn React Native

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

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

تبلیغات

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

https://telegram.me/softskill_ir

آخرین مقالات

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

خبـرنــامه

Newsletters

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