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

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

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

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

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

 

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

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

App.js

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

 

image_example.js

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

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

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

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

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

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

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

App.js

image_example.js

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

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

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

منبع

 

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

  1. React Native یا ریکت نیتیو چیست؟
  2. آموزش React Native – نصب و تنظیم محیط React Native
  3. آموزش App در React Native
  4. آموزش کار با State در React Native
  5. آموزش کار با کامپوننت Props در React Native
  6. آموزش استایل دهی در برنامه نویسی React Native
  7. آموزش flex در برنامه نویسی react native
  8. آموزش لیست ویو در برنامه نویسی React Native
  9. آموزش کار با TextInput در برنامه نویسی ریکت نیتیو
  10. آموزش ScrollView در برنامه نویسی ریکت نیتیو