آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش تصاویر در React Native

دوره های مرتبط با این مقاله

تصاویر در React Native

تصاویر با Resource ثابت

React Native روشی یکپارچه برای مدیریت عکس ها و دیگر فایل های media در application android و iOS فراهم می آورد. برای افرودن یک عکس ثابت به application، آن را جایی در کنار فایل source code بگذارید و به شکل زیر به آن دسترسی پیدا کنید:


< image source="{require('./my-icon.png')}">

نام عکس به شیوه ای مشابه ماژول های جاوااسکریپت، resolve می شود. در مثال بالا، packager در پوشه ی آن component که می خواهد به آن دسترسی پیدا کند ( و آن را require کرده) به دنبال my-icon.png می گردد. همچنین اگر فایل های icon.ios.png و my-icon.android.png داشته باشید، فایل مناسب پلتفرم اجرایی را، انتخاب می کند.

می توانید از پسوندهای @2x و @3x برای عکس های صفحات با تراکم پیکسلی (screen density) متفاوت، استفاده کنید. اگر ساختار فایلی مشابه زیر داشته باشید:


.
├── button.js
└── img
    ├── check.png
    ├── check@2x.png
    └── check@3x.png

و یک کد button.js حاوی :


< Image source={require('./img/check.png')} / >

Packager عکس مناسب با تراکم پیکسلی صفحه را، آماده نمایش می کند. برای مثال، فایل check@2x.png در یک iPhone 7 استفاده می شود، درحالی که فایل check@3x.png در iPhone 7 Plus یا Nexus 5 استفاده می شود. اگر عکسی مناسب تراکم پیکسلی صفحه موجود نباشد، بهترین گزینه ممکن انتخاب می شود.

در Windows بهتر است پس از افزودن عکس های جدید به پروژه، packager را restart کنید.

کار با عکس ها در React ویژگی های خوبی دارد:


  • در iOS و android سیستم یکسانی دارد.
  • عکس ها در همان پوشه ای قرار دارند که کد جاوااسکریپت هست. هر component مستقل و کافی است.
  • global namespace وجود ندارد، لازم نیست نگران یکسان بودن تصادفی نام عکس ها باشید.
  • فقط عکس هایی که در واقعا لازم هستند، برای application آماده می شود.
  • افزودن و تغییر عکس ها نیاز به compile دوباره ی application ندارد، فقط کافی است شبیه ساز را restart کنید.
  • packager ابعاد عکس را می داند، لازم نیست آن را در کد قرار دهید.
  • عکس ها را می توان در package های npm توزیع کرد.

// GOOD
< Image source={require('./my-icon.png')} />;
// BAD
var icon = this.props.active ? 'my-icon-active' : 'my-icon-inactive';
< Image source={require('./' + icon + '.png' )} />;
// GOOD
var icon = this.props.active
  ? require('./my-icon-active.png')
  : require('./my-icon-inactive.png');
< Image source={icon} />;

توجه کنید که تصاویری که به این شیوه require می شوند، حاوی اطلاعات width و height تصویر هستند. اگر می خواهید عکس را پویا scale کنید ( توسط flex) باید دستی { width: undefined, height: undefined } را روی style attribute مقدار دهی کنید.

Resource های ثابت دیگر به غیر از تصویر

syntax require که بالا نشان دادیم می تواند برای افزودن فایل صوتی، ویدئو و فایل های متنی در پروژه هم استفاده شود. انواع رایج فایل هایی که پشتیبانی می شوند عبارتند از html، mav، mp4، mov، و pdf. برای لیست کامل، این لینک را ببینید.

می توانید پشتیبانی از انواع دیگر فایل را با افزودن assetExts resolver option به Metro configuration اضافه کنید.

توجه کنید برای ویدئوها باید به جای flexGrow از absolute positioning استفاده کنید، چرا که اطلاعات مربوط به سایز فعلا برای resource های غیر از عکس، در دسترس نیست. این محدودیت برای ویدئوهایی که مستقیما به Xcode یا پوشه ی Assets در android، reference داده شده اند، وجود ندارد.

تصاویر برای application های hybrid

اگر application hybrid دارید (به این معنا که بخشی از UI آن با React Native و بخشی از کد مختص android/iOS نوشته شده)، می توانید از عکس های آن ها استفاده کنید. برای عکس هایی که توسط Xcode asset catalogs یا پوشه ی drawable در android به application اضافه شده اند، نام عکس را بدون پسوند استفاده کنید :


< image source="{ {uri:" 'app_icon'}}=" " style=" { {width:" 40,="" height:="" 40}}=""> 

برای عکس هایی که در پوشه ی assets android هستند، از الگوی asset:/ استفاده کنید. به عهده شماست که وجود عکس ها در application را تضمین کنید. بعلاوه ابعاد عکس را باید دستی تنظیم کنید.


< Image source={ {uri: 'asset:/app_icon.png'}} style={ {width: 40, height: 40}} />

تصاویر از منابع موجود در شبکه

بسیاری از عکس هایی که در application استفاده می کنید تا زمان کامپایل در دسترس نیستند، و یا ممکن است بخواهید برای پایین نگه داشتن حجم فایل اجرایی، آن ها را dynamic به application اضافه کنید. برخلاف عکسهای resource ثابت، باید دستی ابعاد عکس را مشخص کنید. توصیه می شود به دلیل محدودیت App Transport Security مخصوص iOS، از https استفاده کنید.


// GOOD
< Image source={ {uri: 'https://facebook.github.io/react/logo-og.png'}}
       style={ {width: 400, height: 400}} />
// BAD
< Image source={ {uri: 'https://facebook.github.io/react/logo-og.png'}} />

request برای تصویر

اگر می خواهید همراه request برای تصویر، HTTP-Verb، Header یا Body تعیین کنید، می توانید آن ها را بصورت property روی object source تعریف کنید:


                        < Image source={{
    uri: 'https://facebook.github.io/react/logo-og.png',
    method: 'POST',
    headers: {
      Pragma: 'no-cache',
    },
    body: 'Your Body goes here',
  }}
                               style={ {width: 400, height: 400}} />
						

عکس های بصورت داده در Uri

ممکن است تصویر را به صورت دیتایی encode شده از REST API بگیرید. می توانید برای استفاده از این تصاویر از الگوی 'data:' در uri استفاده کنید. برای این تصاویر هم باید ابعاد را دستی تعیین کرد.

این روش برای تصاویر کوچک و پویا، مثل icon های درون یک لیست درون دیتابیس، توصیه می شود.


// include at least width and height!
< Image style={{
    width: 51,
    height: 51,
    resizeMode: 'contain',
  }}
       source={{
    uri:
      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
  }} / >

Cache Control (مخصوص iOS)

گاهی فقط می خواهیم اگر عکس در local cache موجود است، آن را نمایش دهیم. برای مثال، می خواهیم تا زمانی که تصویر با resolution بالا موجود نیست، یک عکس با resolution پایین load کنیم. گاهی می خواهیم عکس update نشده را نشان دهیم تا در پهنای باند صرفه جویی شود. property cache در source، امکان مدیریت تعامل بین شبکه و Cacheرا میدهد.

default: استراتژی پیش فرض پلتفرم native (android/iOS ) را استفاده می کند.

reload: دیتا از source address دریافت می شود و از cache استفاده نمی شود.

only-if-cached: دیتای cache شده ی موجود استفاده می شود، بدون توجه عمر آن یا expiration date آن. اگر دیتایی مرتبط با request در cache موجود نباشد، تلاشی برای دریافت دیتا از شبکه نخواهد شد.


< Image source={{
    uri: 'https://facebook.github.io/react/logo-og.png',
    cache: 'only-if-cached',
  }}
       style={ {width: 400, height: 400} } />

عکس های درون Local Filesystem

بخش CameraRoll را برای مثالی از استفاده از local resource هایی که خارج از Images.xcassets هستند، ببینید.

iOS چندین سایز برای یک عکس در دوربین ذخیره می کند، برای performance بهتر، انتخاب کوچکترین عکس ها اهمیت دارد. وقتی می خواهید یک thumbnail در سایز X200200 استفاده کنی، نباید از عکسی با کیفیت بالای 3264x2448 به عنوان source استفاده کنید. اگر مورد کاملا مناسب برای آن باشد، React Native آن را برمی دارد. در غیر این صورت عکسی را انتخاب میک ند که حداقل 50 درصد بزرگتر است تا هنگام کوچک شدن، تار نشود. همه ی این موارد خودکار انجام می شود بدون اینکه لازم باشد یک خط کد برای آن بنویسید.

چرا سایز همه چیز را اتوماتیک تعیین نکنیم؟

در مرورگر اگر به عکسی سایز دقیق ندهید، یک المان 0x0 ، render می شود، عکس دانلود می شود و سپس عکس با سایز درست render می شود. بزرگترین مشکل این شیوه، این است که UI در طول load عکس ها دائم تغییر می کند که تجربه کاربری خوبی نیست.

در React Native این رفتار عمدا پیاده سازی نشده است. کار توسعه دهندگان بیشتر می شود چرا که باید ابعاد عکسی را که قرار است load شود بدانند، ولی تجربه کاربری را بهبود می بخشد. عکس های static که توسط دستور require('./my-icon.png') ،load می شوند می توانند اتوماتیک اندازه دهی شوند، چرا که ابعادشان به محض load در دسترس است.

برای مثال، نتیجه ی اجرایrequire('./my-icon.png') می تواند این باشد:


{"__packager_asset":true,"uri":"my-icon.png","width":591,"height":573}

Source به عنوان یک object

در React Native،مشخصه src در واقع source نامیده شده و یک string نمی پذیرد، بلکه یک object با property uri می پذیرد.


< Image source={ {uri: 'something.jpg'} } />

از دیدگاه زیرساختی، این پیاده سازی به ما اجازه می دهد به این object، metadata اضافه کنیم. برای مثال هنگامی که از require('./my-icon.png') استفاده می کنید، اطلاعاتی درمورد مکان دقیق و سایز آن به object اضافه می شود. این رویه برای پیاده سازی های بعدی هم خوب است، برای مثال ممکن است بخواهیم از sprite پشتیبانی کنیم، به جای {uri: ...} می توانیم {uri: ..., crop: {left: 10, top: 50, width: 20, height: 40}} داشته باشیم.

سمت کاربر، امکان افزودن مقادیری برای ابعاد سایز وجود خواهد داشت. همچنین می توانید از هر data structure دیگری برای نگه داری اطلاعات درمورد تصاویرتان استفاده کنید.

عکس background با Nesting

یک قابلیت که همواره توسعه دهنگان سمت وب خواهان آن بوده اند، تصویر پس زمینه است. برای این کار، می توانید از component < imagebackground > استفاده کنید، که prop هایی مشابه component < image > دارد، ومی توانید هرالمانی به عنوان child به آن اضافه کنید، که روی آن نمایش داده شود.< /imagebackground >

ممکن است در مواردی نخواهید از < imagebackground> استفاده کنید، چرا که پیاده سازی آن بسیار ساده است. می توانید برای ساخت component سفارشی برای هدف مورد نظر خود، به مستندات مربوط به آن مراجعه کنید.< /imagebackground >


return (
                        < ImageBackground source={...} style={ {width: '100%', height: '100%'} } >
                        < Text >Inside< /Text >
  < /ImageBackground >
);

توجه کنید تعیین style هایی چون width و height اجباری است.

iOS Border Radius Styles

این property ها که برای style دهی به حاشیه component ها استفاده می شود فعلا در component image برای iOS، کار نمی کند:


  • borderTopLeftRadius
  • borderTopRightRadius
  • borderBottomLeftRadius
  • borderBottomRightRadius

فرایند decoding روی thread غیر از main thread

decode کردن عکس ها زمان بر است. یکی از دلایل اساسی از دست رفتن فریم ها در وب این است که فرایند decoding روی thread اصلی انجام می شود. در React Native، این فرایند در thread دیگری انجام می شود. در عمل، باید راهکارهایی برای نمایش جایگزینی برای عکسی که درحال دانلود شدن است، پیاده سازی کنید. نمایش یک placeholder درحالی که عکس درحال decode شدن است ساده است و تغییر زیادی در کد نمی خواهد.

  • 620
  •    0
  • تاریخ ارسال :   1398/05/31

دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .