بخش های اصلی

آموزش 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}} 
   />
)
در صورتی که سوال و یا نظری دارید، از بخش نظرات با ما در میان بگذارید.

خبـرنــامه

Newsletters

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

شما چه نظر و یا سوالی درباره این نوشته دارید؟

مبحث آموزشی

آموزش React Native

Learn React Native

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

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

تبلیغات

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

https://telegram.me/softskill_ir

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

خبـرنــامه

Newsletters

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