Caching images در React Native
برای انتشار اولین اپلیکیشنی که با React Native نوشتید،شاید همه جوانب رو در نظر گرفته باشید و با خودتون فکر کرده باشید که همه ی bug ها رو پوشش دادید و برنامتون تقریبا بدون مشکل است.من در حال انتشار اولین نسخه از اپلیکیشنم بودم که بصورت ناگهانی متوجه شدم برنامه ای که نوشتم مقدار زیادی داده مصرف میکنه.برای یافتن مشکل و اینکه کدام بخش برنامه این مقدار data مصرف میکنه یک مدت زمان تقریبا طولانی رو وقت گذاشتم و متوجه شدم هر بار که اپلیکیشن باز میشه،تصاویر دانلود و در هیچ جایی ذخیره نمیشدند.
برای بدست آوردن این ایده که ذخیره سازی تصاویر چقدر میتواند اهمیت داشته باشد،یک آزمایش انجام دادم و 10 عکس از Unsplash بدون هیچ caching در برنامه قرار دادم.حجم تقریبی هر عکس تقریبا 10 مگابایت بود.
عکس زیر نتیجه 5 بار باز و بسته شدن اپلیکیشن است.
هر بار که اپلیکیشن lunch شده،کلیه عکس ها دانلود شدند که نشان از یک طراحی ضعیف است.
این نوع طراحی نه تنها باعث غافلگیرشدن مشتری و استفاده زیاد از data میشود،بلکه باعث می شود برنامه شما برای نمایش تصاویر وابسته به اینترنت باشد.همچنین ممکنه که load شدن عکس ها مدت زمان زیادی رو بگیره یا اصلا عکس ها نمایش داده نشه.
برای طراحی یک اپلیکیشن با کمترین استفاده data،زمان پاسخگویی سریعتر و قابلیت اجرا شدن بصورت آفلاین،کافیه که نحوه کش کردن عکس ها رو یادبگیریم و در اپلیکیشن هایی که طراحی میکنیم پیاده سازی کنیم.
React Native Cache Control
ذخیره تصاویر دلخواه است.React Native برای ذخیره تصاویر در طولانی مدت هیچ گونه قابلیتی را ارائه نمی دهد.به تازگی React Native ویژگی Cache رو به کامپوننت image اضافه کرده اند که برخی کنترل ها رو بر روی لایه cache به ما میدهد.
به مثال زیر توجه کنید.از طریق این لینک میتونید به مستندات به صورت کامل دسترسی داشته باشید.
|
1 2 3 4 5 6 7 |
<Image source={{ uri: 'https://facebook.github.io/react/logo-og.png', cache: 'only-if-cached', }} style={{width: 400, height: 400}} /> |
بزرگترین مشکلی که در زمان نوشتن کد وجود دارد این است که فقط در IOS این قابلیت پشتیبانی میشود و همیشه به درستی کار نمیکند و یک راه حل کمتر از حدمطلوب است.
React-native-cached-image
یک راه حل جایگزین و مناسب البته از نظر من کتابخانه react-native-cached-image است که توسط Kfir Golan نوشته شده است.React-native-cached-image یک کامپوننت CachedImage رو به عنوان جایگزینی برای کامپوننت های Image و ImageBackground فراهم میکند.در صورت نیاز شما میتونید از ImageCacheManager برای کنترل بیشتر cash استفاده کنید.
توجه کنید که قبل از استفاده از این پکیج باید react-native-fetch-blob رو نصب کنید که دسترسی به حافظه در کتابخانه react-native-cached-image به این پکیج متکی است.
نصب react-naive-fetch-blob
برای نصب این پکیج به هیج پیکربندی خاصی نیاز نیست و فقط کافی است دستورات زیر رو اجرا کنید.
|
1 2 |
yarn add react-native-fetch-blob react-native link react-native-fetch-blob |
اگر این پکیج بصورت خودکار به پروژتون لینک نشد از طریق مستندات این لینک میتونید بصورت دستی پکیج رو به پروژه لینک کنید.
نصب react-native-cached-image
زمانی که پکیج react-native-fetch-blob با موفقیت نصب شد،حالا باید کتابخانه react-native-cached-image رو با دستور زیر نصب کنید.
|
1 |
yarn add react-native-cached-image |
استفاده از react-native-cached-image
زمانی که هر دو پکیج نصب شد،شما میتونید CachedImage رو ایمپورت کنید و اون رو با هر کامپوننت Image یا ImageBackground جایگزین کنید.
|
1 2 3 4 5 6 7 8 |
import { CachedImage } from 'react-native-cached-image'; <CachedImage style={{ width: Dimensions.get('screen').width, height: Dimensions.get('screen').width, }} source={{ uri: item.urls.raw }} /> |
وقتی که از این کدها استفاده کردم،مجددا آزمایش قبلی رو تکرار کردم و 5 بار اپلیکیشن رو باز و بسته کردم و نتیجه آزمایش بصورت زیر بود.
همونطور که نتیجه آزمایش نشان داد،عکس ها فقط یکبار دانلود شده و 4 دفعه دیگه عکس ها از cach خونده شده.با این کار ارزش های زیادی به اپلیکیشنتون مثل سرعت load بیشتر،عدم وابستگی کامل به اینترنت و کاهش حجم استفاده از data رو در برداره.
نسخه : medium
پاسخی بگذارید