react native fast image

fastimage

Performant رد فعل مكون الصورة الأصلي.

تطبيق Fastimage مثال.

رد فعل مكون Image الخاص بـ React Native يعالج التخزين المؤقت للصور مثل المتصفحات في معظم الأحيان. إذا كان الخادم يعيد رؤوس التحكم في ذاكرة التخزين المؤقت المناسبة للصور ، فستحصل عمومًا على نوع من سلوك التخزين المؤقت الذي لديك في المتصفح. حتى الكثير من الناس لاحظوا:

• الخفقان.
• يخطئ ذاكرة التخزين المؤقت.
• تحميل منخفض الأداء من ذاكرة التخزين المؤقت.
• أداء منخفض بشكل عام.

FastImage هو استبدال Image يحل هذه المشكلات. FastImage عبارة عن غلاف حول sdwebimage (iOS) والانزلاق (Android).

سمات

• صور ذاكرة التخزين المؤقت بقوة.
• إضافة رؤوس التفويض.
• تحديد أولويات الصور.
• صور التحميل المسبق.
• دعم GIF.
• دائرة نصف قطرها الحدود.

الاستخدام

ملاحظة: يجب أن تستخدم React Native 0.60.0 أو أعلى لاستخدام أحدث إصدار من react-native-fast-image .

yarn add react-native-fast-image
cd ios && pod install

 import FastImage from 'react-native-fast-image'

const YourImage = ( ) => (
    < FastImage
        style = { { width : 200 , height : 200 } }
        source = { {
            uri : 'https://unsplash.it/400/400?image=1' ,
            headers : { Authorization : 'someAuthToken' } ,
            priority : FastImage . priority . normal ,
        } }
        resizeMode = { FastImage . resizeMode . contain }
    />
) 

هل تستخدم Glide بالفعل باستخدام AppGlideModule؟

• هل تستخدم Glide بالفعل باستخدام AppGlideModule؟ (قد تواجه مشاكل إذا لم تقرأ هذا)

هل تستخدم بروغارد؟

إذا كنت تستخدم Proguard ، فستحتاج إلى إضافة هذه الخطوط إلى android/app/proguard-rules.pro :

 -keep public class com.dylanvann.fastimage.* {*;}
-keep public class com.dylanvann.fastimage.** {*;}
-keep public class * implements com.bumptech.glide.module.GlideModule
-keep public class * extends com.bumptech.glide.module.AppGlideModule
-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
  **[] $VALUES;
  public *;
}

ملكيات

source?: object

مصدر للصورة عن بُعد للتحميل.

---

source.uri?: string

عنوان URL عن بعد لتحميل الصورة من. eg 'https://facebook.github.io/react/img/logo_og.png' .

---

source.headers?: object

رؤوس لتحميل الصورة مع. على سبيل المثال { Authorization: 'someAuthToken' } .

---

source.priority?: enum

• FastImage.priority.low - أولوية منخفضة.
• FastImage.priority.normal (الافتراضي) - الأولوية العادية.
• FastImage.priority.high - أولوية عالية.

---

source.cache?: enum

• FastImage.cacheControl.immutable - (افتراضي) - تحديثات فقط إذا تغير عنوان URL.
• FastImage.cacheControl.web - استخدم الرؤوس واتبع إجراءات التخزين المؤقت العادية.
• FastImage.cacheControl.cacheOnly - عرض الصور فقط من ذاكرة التخزين المؤقت ، لا تقدم أي طلبات الشبكة.

---

defaultSource?: number

• أحد الأصول المحملة مع require(...) .
• لاحظ أنه مثل تطبيق Image المدمج ، على Android defaultSource لا يعمل في وضع التصحيح. ويرجع ذلك إلى حقيقة أن الأصول يتم إرسالها من خادم DEV ، ولكن وظائف RN تعرف فقط كيفية تحميلها من res .

---

resizeMode?: enum

• FastImage.resizeMode.contain - قم بتوسيع نطاق الصورة بشكل موحد (الحفاظ على نسبة العرض إلى ارتفاع الصورة) بحيث يكون كل من الأبعاد (عرض وارتفاع) الصورة مساوية أو أقل من البعد المقابل للمنظر (ناقص الحشو).
• FastImage.resizeMode.cover (افتراضي) - قم بتوسيع نطاق الصورة بشكل موحد (الحفاظ على نسبة عرض الصورة) بحيث يكون كل من الأبعاد (عرض وارتفاع) الصورة مساوية أو أكبر من البعد المقابل للمنظر (الحوض ناقص).
• FastImage.resizeMode.stretch - عرض المقياس والارتفاع بشكل مستقل ، قد يغير هذا نسبة العرض إلى الارتفاع في SRC.
• FastImage.resizeMode.center - لا تقم بتوسيع نطاق الصورة ، واصل التركيز.

---

onLoadStart?: () => void

تسمى عندما تبدأ الصورة في التحميل.

---

onProgress?: (event) => void

يسمى عندما يتم تحميل الصورة.

على سبيل المثال onProgress={e => console.log(e.nativeEvent.loaded / e.nativeEvent.total)}

---

onLoad?: (event) => void

استدعاء صورة جلب ناجحة. ودعا مع عرض وارتفاع الصورة المحملة.

على سبيل المثال onLoad={e => console.log(e.nativeEvent.width, e.nativeEvent.height)}

---

onError?: () => void

استدعاء صورة جلب خطأ.

---

onLoadEnd?: () => void

يسمى عندما تنتهي الصورة من التحميل ، سواء كانت ناجحة أو خطأ.

---

style

أسلوب رد فعل أصلي. يدعم استخدام borderRadius .

---

fallback: boolean

إذا كان صحيحا سوف تعطل لاستخدام Image . في هذه الحالة ، ستظل الصورة مصممة ووضعها بنفس الطريقة التي يتم بها FastImage .

---

tintColor?: number | string

إذا تم توفيرها ، فإنه يغير لون جميع وحدات البكسل غير الشفافة إلى اللون المحدد.

طرق ثابتة

FastImage.preload: (source[]) => void

الصور المسبقة لعرضها لاحقًا. على سبيل المثال

 FastImage . preload ( [
    {
        uri : 'https://facebook.github.io/react/img/logo_og.png' ,
        headers : { Authorization : 'someAuthToken' } ,
    } ,
    {
        uri : 'https://facebook.github.io/react/img/logo_og.png' ,
        headers : { Authorization : 'someAuthToken' } ,
    } ,
] )

FastImage.clearMemoryCache: () => Promise<void>

امسح جميع الصور من ذاكرة التخزين المؤقت للذاكرة.

FastImage.clearDiskCache: () => Promise<void>

امسح جميع الصور من ذاكرة التخزين المؤقت للقرص.

استكشاف الأخطاء وإصلاحها

إذا كانت لديك أي مشاكل في استخدام هذه المكتبة ، جرب الخطوات في استكشاف الأخطاء وإصلاحها ومعرفة ما إذا كانت تصلحها.

تطوير

اتبع هذه الإرشادات للحصول على تطبيق المثال.

الإصدارات الأصلية رد الفعل المدعوم

يهدف هذا المشروع فقط إلى دعم أحدث إصدار من React Native.
هذا يبسط تطور واختبار المشروع.

إذا كنت تحتاج إلى ميزات جديدة أو إصلاحات الأخطاء للإصدارات القديمة ، فيمكنك تغطية هذا المشروع.

الاعتمادات

جاءت فكرة هذه الوحدات من حزمة صورة Vovkasm من Web-web-image. كما أنه يستخدم Glide و Sdwebimage ، ولكن لم يكن لديه بعض الميزات التي احتاجها (الأولوية ، الرؤوس).

بفضل mobinni للمساعدة في التصور

التراخيص

• Fastimage - MIT © Dylanvann
• sdwebimage - MIT
• Glide - BSD ، جزء معهد ماساتشوستس للتكنولوجيا و Apache 2.0. انظر ملف الترخيص للحصول على التفاصيل.