چگونه مشکل عکس پس زمینه حل شد؟

توی یکی از پروژه های React Native قرار شد پس زمینه صفحه ورود اپلیکیشن یک تصویر مات شده یا به اصطلاح Blur شده قرار بدیم. مثل همیشه با یک جستجوی سریع در صفحه مستندات وبسایت خود React native به کامپوننت Image رجوع کردم و متوجه شدم از این کامپوننت تنها برای قرار دادن عکس بر روی صفحه استفاده می شه! و نه به عنوان پس زمینه. به جستجو در یاور همیشگی جناب گوگل خان ادامه دادم و تمامی نتایج، اشاره به استفاده از همین کامپوننت Image داشت که به اصطلاح می تواند بی نهایت کامپوننت فرزند داشته باشد و در نقش تصویر پس زمینه ظاهر شود. مثل این قطعه کد:

<Image source={...} style={styles.MainContainer} >
{/* Put All Your Component Here Inside Root Image Component. */}
<Text>Inside</Text>
</Image>

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

سلام بر ImageBackground
ظاهرا توسعه دهندگان فیسبوک تصمیم گرفتند از نسخه 0.46 به بعد اجازه داشتن کامپوننت فرزند رو از کامپوننت Image بگیرند و با معرفی کامپوننت جدید ImageBackground کار رو برای ما راحت تر کنند. نکته قابل توجه این هست که هنوز هم به طور رسمی در لیست کامپوننت های سایت اصلی وجود نداره و حدودا از 3 ماه پیش در پایین صفحه کامپوننت Image معرفی شد. حالا دیگه خیلی راحت می تونستم به وسیله قطعه کد زیر با بینهایت کامپوننت فرزند یک عکس تمام صفحه پس زمینه داشته باشم:

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

 

محمد قاسمی

فوق لیسانس مهندسی نرم افزار دارم و برنامه نویسی رو حدودا ۱۴ سال پیش با ویژوال بیسیک شروع کردم. عاشق فن آوری هستم و می خواهم آن را با دیگران در قالبی حرفه ای به اشتراک بگذارم.

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

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *