تحميل الصور بشكل سريع React Native

يمكنك إستخدام عمليات التخزين المؤقت (caching) عن طريق:

• قم بتنزيل الصورة وحفظها محليًا باستخدام React Native Fetch Blob.
• قم بحفظ الصور عن طريق كائن (object)، حيث أن تكون المفاتيح (object keys) هي الـ ID للصورة، وتكون القيم (object values) هي العنوان المحلي للصورة على الجهاز، وليس الـ URL الذي قمت بتحميل الصورة منه.

مثال بداخل المكون (component):

RNFetchBlob
	.config({
  		// قم باستخدام خاصية التخزين المؤقت
		fileCache : true,
	})
	.fetch('GET', 'http://www.example.com/photo.png', {})
	.then((res) => {
  		// سيكون الملف جاهزاً
		const file = res.path();
	})

يمكنك استخدام مكتبة react-native-cached-image والتي توفر مكون CashedImage والذي بدوره يعمل كبديل ل Image وهذه هي كيفية الاستخدام حسب توثيق المكتبة 

import React from 'react';
import {
    CachedImage,
    ImageCacheProvider
} from 'react-native-cached-image';

const images = [
    'https://example.com/images/1.jpg',
    'https://example.com/images/2.jpg',
    'https://example.com/images/3.jpg',
    // ...
];

export default class Example extends React.Component {
    render() {
        return (
            <ImageCacheProvider
                urlsToPreload={images}
                onPreloadComplete={() => console.log('hey there')}>

                <CachedImage source={{uri: images[0]}}/>

                <CachedImage source={{uri: images[1]}}/>

                <CachedImage source={{uri: images[2]}}/>

            </ImageCacheProvider>
        );
    }
}

لكن قبل ان تتمكن من استخدام مكتبة react-native-cached-image يجب عليك أولا تثبيت مكتبة react-native-fetch-blob لأن مكتبة react-native-cached-image تعتمد عليها في العمل 

yarn add react-native-fetch-blob
react-native link react-native-fetch-blob

بعد ذلك يمكنك تثبيت المكتبة  واستخدامها كما وضحت في الأعلى أو يمكنك الاتطلاع على التوثيق الرسمي للمكتبة لاستخدامات أخرى

yarn add react-native-cached-image