الفرق بين المراجعتين ل"ReactNative/image"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (مراجعة)
(مراجعة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:Image في React Native}}</noinclude>
+
<noinclude>{{DISPLAYTITLE:المكون Image في React Native}}</noinclude>
 
المكوّن الخاصّ بإظهار مختلف أنواع الصّور في منصّة React، والتي تتضمّن صور الشّبكة وصور المصادر الثّابتة (static resources) والصّور المحلّيّة المؤقّتة والصّور المخزّنة على القرص المحلّي كمعرض الصور.
 
المكوّن الخاصّ بإظهار مختلف أنواع الصّور في منصّة React، والتي تتضمّن صور الشّبكة وصور المصادر الثّابتة (static resources) والصّور المحلّيّة المؤقّتة والصّور المخزّنة على القرص المحلّي كمعرض الصور.
  
سطر 9: سطر 9:
 
== أمثلة ==
 
== أمثلة ==
  
* مثال لمكوِّن دالّة (Function Component)
+
* [https://snack.expo.dev/@hsoubwiki/image-function-component-example مثال لمكوِّن دالّة (Function Component)]
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
import React from 'react';
 
import React from 'react';
سطر 54: سطر 54:
 
export default DisplayAnImage;
 
export default DisplayAnImage;
 
</syntaxhighlight>
 
</syntaxhighlight>
* مثال لمكوِّن صنف (Class Component)
+
* [https://snack.expo.dev/@hsoubwiki/image-class-component-example مثال لمكوِّن صنف (Class Component)]
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
import React, { Component } from 'react';
 
import React, { Component } from 'react';
سطر 97: سطر 97:
 
</syntaxhighlight>كما يمكن إضافة تنسيقٍ <code>style</code> للصّورة كما يلي:
 
</syntaxhighlight>كما يمكن إضافة تنسيقٍ <code>style</code> للصّورة كما يلي:
  
* مثال لمكوِّن دالّة (Function Component)
+
* [https://snack.expo.dev/@hsoubwiki/image-style-function-component-example مثال لمكوِّن دالّة (Function Component)]
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
import React from 'react';
 
import React from 'react';
سطر 126: سطر 126:
 
export default DisplayAnImageWithStyle;
 
export default DisplayAnImageWithStyle;
 
</syntaxhighlight>
 
</syntaxhighlight>
* مثال لمكوِّن صنف (Class Component)
+
* [https://snack.expo.dev/@hsoubwiki/image-style-class-component-example مثال لمكوِّن صنف (Class Component)]
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
import React, { Component } from 'react';
 
import React, { Component } from 'react';
سطر 155: سطر 155:
 
</syntaxhighlight>
 
</syntaxhighlight>
  
== دعم صور GIF وWebP على منصة Android ==
+
== دعم صور GIF و WebP على منصة Android ==
لا تُدعم الصّور من نوع GIF وWebP افتراضيًّا على منصّة Android عند بناء شفرة أصيلة شخصيّة، لذا يجب إضافة بعض الوحدات الاختياريّة على المسار <code>android/app/build.gradle</code> بما يتوافق مع حاجة التّطبيق.<syntaxhighlight lang="javascript">
+
لا تُدعم الصّور من نوع GIF والنوع WebP افتراضيًّا على منصّة Android عند بناء شفرة أصيلة شخصيّة، لذا يجب إضافة بعض الوحدات الاختياريّة على المسار <code>android/app/build.gradle</code> بما يتوافق مع حاجة التّطبيق.<syntaxhighlight lang="javascript">
 
dependencies {
 
dependencies {
   // If your app supports Android versions before Ice Cream Sandwich (API level 14)
+
   // ‫إذا كان تطبيقك يدعم إصدارات أندرويد التي تسبق الإصدار Ice Cream Sandwich (API level 14)
 
   implementation 'com.facebook.fresco:animated-base-support:1.3.0'
 
   implementation 'com.facebook.fresco:animated-base-support:1.3.0'
 
 
   // For animated GIF support
+
   // ‫لدعم صور GIF المتحركة
 
   implementation 'com.facebook.fresco:animated-gif:2.0.0'
 
   implementation 'com.facebook.fresco:animated-gif:2.0.0'
 
 
   // For WebP support, including animated WebP
+
   // ‫لدعم صور WebP بما فيها المتحركة
 
   implementation 'com.facebook.fresco:animated-webp:2.1.0'
 
   implementation 'com.facebook.fresco:animated-webp:2.1.0'
 
   implementation 'com.facebook.fresco:webpsupport:2.0.0'
 
   implementation 'com.facebook.fresco:webpsupport:2.0.0'
 
 
   // For WebP support, without animations
+
   // ‫لدعم صور WebP دون الصور المتحركة منها
 
   implementation 'com.facebook.fresco:webpsupport:2.0.0'
 
   implementation 'com.facebook.fresco:webpsupport:2.0.0'
 
}
 
}
سطر 174: سطر 174:
  
 
== الخاصيات ==
 
== الخاصيات ==
 
+
يرث خاصيات المكون <code>[[ReactNative/view|View]]</code>.
=== <code>style</code> ===
 
الخاصيّة <code>ImageResizeMode</code> هي من نوع <code>enum</code>، وتُستخدم لتغيير وضع تحجيم الصور، ويتم ضبطها عن طريق خاصيّة التنسيق <code>ResizeMode</code> في المكون <code>Image</code>، ويمكن أن تأخذ إحدى القيم (<code>contain</code>,<code>cover</code>, <code>stretch</code>,<code>center</code>,<code>repeat</code>).
 
{| class="wikitable"
 
!النوع
 
!مطلوب
 
|-
 
|تنسيق (<code>[[ReactNative/style|style]]</code>)
 
|لا
 
|}
 
ومن خاصيّات التّنسيق أيضًا:
 
 
 
* [[ReactNative/image style props|<code>Image Style</code>]]
 
* [[ReactNative/layout props|<code>Layout</code>]]
 
* [[ReactNative/shadow props|<code>Shadow</code>]]
 
* [[ReactNative/transforms|<code>Transforms</code>]]
 
  
 
=== <code>accessible</code> ===
 
=== <code>accessible</code> ===
سطر 223: سطر 208:
 
|عدد (number)
 
|عدد (number)
 
|لا
 
|لا
|}'''ملاحظة:''' يجب أن تكون قيمة <code>blurRadius</code> أكبر من <code>5</code> على منصّة IOS.  
+
|}'''ملاحظة:''' يجب أن تكون قيمة <code>blurRadius</code> أكبر من <code>5</code> على منصّة iOS.  
 
=== <code>capInsets</code>  ===
 
=== <code>capInsets</code>  ===
 
لتثبيت أبعاد الحواف المحدّدة في <code>capInsets</code> عند تغيير حجم الصّورة، بينما تتمدّد باقي أجزاء الصّورة،  وبالتّالي تفيد هذه الخاصيّة في إنشاء عناصر مفيدةٍ متغيّرة الحجم ودائريّة الحوافّ، مثل: الأزرار، والظّلال وغيرها، ويمكن الاطلاع على [https://developer.apple.com/documentation/uikit/uiimage#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets التّوثيق الرسمي لشركة Apple] لمزيدٍ من المعلومات.
 
لتثبيت أبعاد الحواف المحدّدة في <code>capInsets</code> عند تغيير حجم الصّورة، بينما تتمدّد باقي أجزاء الصّورة،  وبالتّالي تفيد هذه الخاصيّة في إنشاء عناصر مفيدةٍ متغيّرة الحجم ودائريّة الحوافّ، مثل: الأزرار، والظّلال وغيرها، ويمكن الاطلاع على [https://developer.apple.com/documentation/uikit/uiimage#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets التّوثيق الرسمي لشركة Apple] لمزيدٍ من المعلومات.
سطر 241: سطر 226:
 
!النوع
 
!النوع
 
!مطلوب
 
!مطلوب
!المنصة
 
 
|-
 
|-
|كائن، عدد (number, object)
+
|ImageSource (انظر في الأسفل)
 
|لا
 
|لا
|iOS
 
|-
 
|عدد (number)
 
|لا
 
|Android
 
 
|}
 
|}
فعند تمريرها ككائنٍ فسيكون من الشّكل: <code>{uri: string, width: number, height: number, scale: number}</code>  حيث:
 
 
* <code>uri</code>: سلسلةٌ نصّيةٌ تمثّل معرِّف مصدر الصورة (resource identifier)، والذي قد يكون مسار الملف المحلّي، أو مصدر الصّورة الثّابت (المغلَّف بالدالة ‪.<code>require('./path/to/image.png')</code>)
 
* <code>width</code>، <code>height</code>: يمكن تحديدها عند البناء إذا كانت معروفةً، وتُستخدم لضبط الأبعاد الافتراضيّة للمكوّن <code><Image/></code>.
 
* <code>scale</code>: تُستخدم لتحديد مقياس رسم (scale) الصورة، والقيمة الافتراضيّة له هي 1.0 والتي تعني أنّ كل بكسل (pixel) من الصورة يقابل نقطة إظهارٍ واحدةٍ DIP.
 
 
أمّا عند تمريرها كعددٍ:
 
 
* <code>number</code>: نوع مبهم (Opaque) معاد من قبل شيءٍ ما مثل ‪.<code>require('./image.jpg')</code>
 
 
'''ملاحظة:''' يتم تجاهل هذه الخاصية أثناء البناء الاختباريّ على منصة Android.  
 
'''ملاحظة:''' يتم تجاهل هذه الخاصية أثناء البناء الاختباريّ على منصة Android.  
 
=== <code>fadeDuration</code> ===
 
=== <code>fadeDuration</code> ===
سطر 279: سطر 249:
 
!مطلوب
 
!مطلوب
 
|-
 
|-
|(array of ImageSourcePropTypes, number)
+
|ImageSource (مع <code>uri</code> فقط، انظر في الأسفل)، أو عدد
 
|لا
 
|لا
|}'''ملاحظة:''' يمكنها قبول العدد الذي تعيده ‪.<code>require('./image.jpg')</code>
+
|}
 
=== <code>onError</code> ===
 
=== <code>onError</code> ===
تُستدعى بالحدث <code><nowiki>{{nativeEvent: {error}</nowiki></code> وذلك عند حدوث خطأ في التّحميل.  
+
تُستدعى عند حدوث خطأ في التّحميل.  
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
 
!مطلوب
 
!مطلوب
 
|-
 
|-
|دالة (function)
+
|دالة (function)<syntaxhighlight lang="js">
 +
({ nativeEvent: { error } }) => void
 +
 
 +
</syntaxhighlight>
 
|لا
 
|لا
 
|}
 
|}
  
 
=== <code>onLayout</code> ===
 
=== <code>onLayout</code> ===
تُستدعى بالحدث <code><nowiki>{{{nativeEvent: {layout: {x, y, width, height}</nowiki></code> وذلك عند تغيّر التنسيق.  
+
تُستدعى وذلك عند وصل المكون (عرضه) أو عند تغيّر التخطيط.  
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
 
!مطلوب
 
!مطلوب
 
|-
 
|-
|دالة (function)
+
|دالة (function)<syntaxhighlight lang="js">
 +
({ nativeEvent: LayoutEvent }) => void
 +
 
 +
</syntaxhighlight>
 
|لا
 
|لا
 
|}
 
|}
سطر 308: سطر 284:
 
!مطلوب
 
!مطلوب
 
|-
 
|-
|دالة (function)
+
|دالة (function)<syntaxhighlight lang="js">
 +
(ImageLoadEvent) => void
 +
</syntaxhighlight>
 
|لا
 
|لا
 
|}
 
|}
سطر 318: سطر 296:
 
!مطلوب
 
!مطلوب
 
|-
 
|-
|دالة (function)
+
|دالة (function)<syntaxhighlight lang="js">
 +
() => void
 +
 
 +
</syntaxhighlight>
 
|لا
 
|لا
 
|}
 
|}
سطر 328: سطر 309:
 
!مطلوب
 
!مطلوب
 
|-
 
|-
|دالة (function)
+
|دالة (function)<syntaxhighlight lang="js">
 +
() => void
 +
 
 +
</syntaxhighlight>
 
|لا
 
|لا
 
|}
 
|}
سطر 339: سطر 323:
 
!المنصة
 
!المنصة
 
|-
 
|-
|دالة (function)
+
|دالة (function)<syntaxhighlight lang="js">
 +
() => void
 +
 
 +
</syntaxhighlight>
 
|لا
 
|لا
 
|iOS
 
|iOS
سطر 345: سطر 332:
  
 
=== <code>onProgress</code> ===
 
=== <code>onProgress</code> ===
تُستدعى بالحدث <code><nowiki>{{nativeEvent: {loaded, total}</nowiki></code> وذلك عند تقدم التّحميل.  
+
تُستدعى عند تقدم التّحميل.  
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
سطر 351: سطر 338:
 
!المنصة
 
!المنصة
 
|-
 
|-
|دالة (function)
+
|دالة (function)<syntaxhighlight lang="js">
 +
({ nativeEvent: { loaded, total } }) => void
 +
 
 +
</syntaxhighlight>
 
|لا
 
|لا
 
|iOS
 
|iOS
سطر 357: سطر 347:
  
 
=== <code>progressiveRenderingEnabled</code> ===
 
=== <code>progressiveRenderingEnabled</code> ===
تعمل على منصّة Android فقط، وتُستخدم لتمكين تدفّق (streaming) صور JPEG المتقدم. ويمكن زيارة [https://frescolib.org/docs/progressive-jpegs.html Progressive JPEGs] لمزيد من المعلومات.
+
تعمل على منصّة Android فقط، وتُستخدم لتمكين تدفّق (streaming) صور JPEG المتقدم. ويمكن زيارة [https://frescolib.org/docs/progressive-jpegs.html Progressive JPEGs] لمزيد من المعلومات.
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
سطر 363: سطر 353:
 
!المنصة
 
!المنصة
 
|-
 
|-
|(bool)
+
|قيمة منطقية (bool)
 
|لا
 
|لا
 
|Android
 
|Android
سطر 407: سطر 397:
 
كما يمكن أن تتضمن هذه الخاصيّة العديد من عناوين URL البعيدة مع تحديد العرض، والارتفاع وربّما مقياس الرّسم وغيرها من معاملات URL، فيقوم التّطبيق الأصيل باختيار أفضل <code>uri</code> ليعرضه وذلك اعتمادًا على أبعاد حاوية الصورة (image container)، كما يمكن إضافة الخاصية <code>cache</code> للتحكم بكيفيّة تفاعل الطّلبات الشّبكيّة مع التخزين المحلّيّ المؤقّت (local cache). ويمكن الإطلاع على [[ReactNative/images|التحكم بالتخزين المؤقت للصور]] لمزيد من المعلومات.
 
كما يمكن أن تتضمن هذه الخاصيّة العديد من عناوين URL البعيدة مع تحديد العرض، والارتفاع وربّما مقياس الرّسم وغيرها من معاملات URL، فيقوم التّطبيق الأصيل باختيار أفضل <code>uri</code> ليعرضه وذلك اعتمادًا على أبعاد حاوية الصورة (image container)، كما يمكن إضافة الخاصية <code>cache</code> للتحكم بكيفيّة تفاعل الطّلبات الشّبكيّة مع التخزين المحلّيّ المؤقّت (local cache). ويمكن الإطلاع على [[ReactNative/images|التحكم بالتخزين المؤقت للصور]] لمزيد من المعلومات.
  
صيغ الصّور (format) المدعومة حاليًّا على منصّة Android هي: (<code>png</code>, <code>jpg</code>,<code>jpeg</code>, <code>bmp</code>, <code>gif</code>,<code>webp</code>)، والصيغة <code>psd</code> على منصة iOS. كما تدعم منصة iOS العديد من صيغ الصّور الصّرفة (RAW)، ويمكن الرّجوع إلى توثيق شركة Apple للإطلاع على قائمة الكاميرات المدعومة (وفيما يخص الإصدار iOS 12 فيمكن زيارة [https://support.apple.com/en-ca/HT208967 support apple].  
+
صيغ الصّور (format) المدعومة حاليًّا على منصّة Android هي: (<code>png</code>, <code>jpg</code>,<code>jpeg</code>, <code>bmp</code>, <code>gif</code>,<code>webp</code>)، والصيغة <code>psd</code> على منصة iOS. كما تدعم منصة iOS العديد من صيغ الصّور الصّرفة (RAW أي ذات الصيغة الثنائية)، ويمكن الرّجوع إلى توثيق شركة Apple للإطلاع على قائمة الكاميرات المدعومة (وفيما يخص الإصدار iOS 12 فيمكن زيارة [https://support.apple.com/en-ca/HT208967 support apple]).  
 
{| class="wikitable"
 
{| class="wikitable"
 
!النوع
 
!النوع
 
!مطلوب
 
!مطلوب
 
|-
 
|-
|ImageSourcePropType
+
|ImageSource
 
|لا
 
|لا
 
|}
 
|}
  
 +
=== <code>style</code> ===
 +
تُستخدم لتنسيق الصورة.
 +
{| class="wikitable"
 +
!النوع
 +
!مطلوب
 +
|-
 +
|إحدى خاصيّات التّنسيق:
 +
*[[ReactNative/image style props|<code>Image Style</code>]]
 +
*[[ReactNative/layout props|<code>Layout</code>]]
 +
*[[ReactNative/shadow props|<code>Shadow</code>]]
 +
*[[ReactNative/transforms|<code>Transforms</code>]]
 +
|لا
 +
|}
 
=== <code>testID</code> ===
 
=== <code>testID</code> ===
 
معرِّف فريد لهذا العنصر يستخدم سكربتات اختبار أتمتة واجهة المستخدم.
 
معرِّف فريد لهذا العنصر يستخدم سكربتات اختبار أتمتة واجهة المستخدم.
 +
{| class="wikitable"
 +
!النوع
 +
|-
 +
|سلسلة نصية (string)
 +
|}
 +
== التوابع ==
  
== التوابع ==
+
=== <code>abortPrefetch()‎</code> ===
 +
<syntaxhighlight lang="javascript">
 +
Image.abortPrefetch(requestId);
 +
</syntaxhighlight>يلغي طلبات الجلب المسبق للصّور، ويعمل على منصّة Android فقط.
 +
 
 +
==== المعاملات ====
 +
{| class="wikitable"
 +
!الاسم
 +
!النوع
 +
!مطلوب
 +
!الوصف
 +
|-
 +
|<code>requestId</code>
 +
|عدد (number)
 +
|نعم
 +
|المعرف ID المعاد من <code>()prefetch</code>
 +
|}
  
 
=== <code>getSize()‎</code> ===
 
=== <code>getSize()‎</code> ===
سطر 428: سطر 453:
 
يجب تحميل الصّورة في البداية، ثم تخزينها مؤقّتًا قبل تمكُّن هذا التّابع من استرجاع أبعادها، ممّا يعني أنّه يمكن من حيث المبدأ استخدام هذا التّابع لتحميل الصّورة مسبقًا (preload)، ومع ذلك فهو ليس الأمثل لهذا الغرض، ويمكن في المستقبل أن يُبرمَج بحيث لا يحتاج لتحميل كامل معطيات الصورة. ويفضل تحميل الصّور مسبقًا عن طريق واجهة برمجيّة مستقلة.  
 
يجب تحميل الصّورة في البداية، ثم تخزينها مؤقّتًا قبل تمكُّن هذا التّابع من استرجاع أبعادها، ممّا يعني أنّه يمكن من حيث المبدأ استخدام هذا التّابع لتحميل الصّورة مسبقًا (preload)، ومع ذلك فهو ليس الأمثل لهذا الغرض، ويمكن في المستقبل أن يُبرمَج بحيث لا يحتاج لتحميل كامل معطيات الصورة. ويفضل تحميل الصّور مسبقًا عن طريق واجهة برمجيّة مستقلة.  
  
==== المعاملات ====
+
المعاملات التي يأخذها:
 
{| class="wikitable"
 
{| class="wikitable"
 
!الاسم
 
!الاسم
سطر 458: سطر 483:
 
يجب تحميل الصورة في البداية، ثمّ تخزينها بشكلٍ مؤقّتٍ قبل تمكُّن هذا التّابع من استرجاع أبعادها، ما يعني أنه يمكن من حيث المبدأ استخدام هذا التابع لتحميل الصّورة مسبقًا (preload)، غير أنّه ليس الأمثل لهذا الغرض، ويمكن في المستقبل أن يُبرمَج بحيث لا يحتاج لتحميل كامل معطيات الصورة. ويفضل أن تحمّل الصور مسبقًا عن طريق واجهة برمجية مستقلة.  
 
يجب تحميل الصورة في البداية، ثمّ تخزينها بشكلٍ مؤقّتٍ قبل تمكُّن هذا التّابع من استرجاع أبعادها، ما يعني أنه يمكن من حيث المبدأ استخدام هذا التابع لتحميل الصّورة مسبقًا (preload)، غير أنّه ليس الأمثل لهذا الغرض، ويمكن في المستقبل أن يُبرمَج بحيث لا يحتاج لتحميل كامل معطيات الصورة. ويفضل أن تحمّل الصور مسبقًا عن طريق واجهة برمجية مستقلة.  
  
لا يعمل مع الصّور ذات المصدر الثّابت.
+
المعاملات التي يأخذها:
 
 
==== المعاملات ====
 
 
{| class="wikitable"
 
{| class="wikitable"
 
!الاسم
 
!الاسم
سطر 504: سطر 527:
 
|نعم
 
|نعم
 
|العنوان البعيد لموقع الصورة
 
|العنوان البعيد لموقع الصورة
|}
 
 
=== <code>abortPrefetch()‎</code> ===
 
<syntaxhighlight lang="javascript">
 
Image.abortPrefetch(requestId);
 
</syntaxhighlight>يلغي طلبات الجلب المسبق للصّور، ويعمل على منصّة Android فقط.
 
 
==== المعاملات ====
 
{| class="wikitable"
 
!الاسم
 
!النوع
 
!مطلوب
 
!الوصف
 
 
|-
 
|-
|<code>requestId</code>
+
|<code>callback</code>
|عدد (number)
+
|دالة (function) على منصة آندرويد
|نعم
+
|لا
|المعرف ID المعاد من ()prefetch
+
|الدالة التي ستسدعى مع المُعرِّف <code>requestId</code>.
 
|}
 
|}
  
=== <code>queryCache()‎</code> ===
+
===<code>queryCache()‎</code>===
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
 
Image.queryCache(urls);
 
Image.queryCache(urls);
 
</syntaxhighlight>يتحقّق من التّخزين المؤقت، ثمّ يعيد ربطًا (mapping) بين عنوان URL وحالة التّخزين المؤقّت (cache status) له، مثلًا على القرص <code>disk</code> أم على الذاكرة <code>memory</code>، وإذا لم يوجد عنوان محدّد في كتلة الربط تلك، فهذا يعني عدم وجوده في المخزن المؤقت.
 
</syntaxhighlight>يتحقّق من التّخزين المؤقت، ثمّ يعيد ربطًا (mapping) بين عنوان URL وحالة التّخزين المؤقّت (cache status) له، مثلًا على القرص <code>disk</code> أم على الذاكرة <code>memory</code>، وإذا لم يوجد عنوان محدّد في كتلة الربط تلك، فهذا يعني عدم وجوده في المخزن المؤقت.
  
==== المعاملات ====
+
المعاملات التي تأخذها:
 
{| class="wikitable"
 
{| class="wikitable"
 
!الاسم
 
!الاسم
سطر 547: سطر 557:
 
</syntaxhighlight>يعيد المرجع المساعد (asset reference) على شكل كائن له الخاصيّات <code>uri</code>، و<code>width</code>، و<code>height</code>.
 
</syntaxhighlight>يعيد المرجع المساعد (asset reference) على شكل كائن له الخاصيّات <code>uri</code>، و<code>width</code>، و<code>height</code>.
  
==== المعاملات ====
+
المعاملات التي تأخذها:
 
{| class="wikitable"
 
{| class="wikitable"
 
!الاسم
 
!الاسم
سطر 555: سطر 565:
 
|-
 
|-
 
|<code>source</code>
 
|<code>source</code>
|عدد (number)، كائن (object)
+
|ImageSource، عدد (number)
 
|نعم
 
|نعم
 
|العدد من النوع المبهم الذي تعيده ‪require('./image.jpg')  
 
|العدد من النوع المبهم الذي تعيده ‪require('./image.jpg')  
سطر 561: سطر 571:
 
أو الكائن <code>ImageSource</code>
 
أو الكائن <code>ImageSource</code>
 
|}
 
|}
'''ملاحظة:''' <code>ImageSource</code>هو  كائنٌ من الشكل ‪.<code>{ uri: '<http location || file path>' }</code>
+
 
 +
== تعريفات الأنواع ==
 +
 
 +
=== <code>ImageCacheEnum</code> (خاصة بمنصة iOS) ===
 +
تعداد enum يمكن استخدامه لضبط عملية معالجة التخزين المؤقت أو ضبط أسلوب لمعالجة الاستجابات التي يحتمل أنها جُلبت وخُزِّنت مؤقتًا.
 +
{| class="wikitable"
 +
!النوع
 +
!القيمة الافتراضية
 +
|-
 +
|إحدى القيم التالية:
 +
(‎<code>'default'</code>, <code>'reload'</code>, <code>'force-cache'</code>, <code>'only-if-cached'‎</code>)
 +
|<code>'default'</code>
 +
|}
 +
 
 +
* <code>default</code>: استخدم الأسلوب الافتراضي الذي توفره المنصة الأصيلة.
 +
* <code>reload</code>: البيانات أو عنوان URL الذي سيُحمَّل من المصدر الأصلي. لا يفترض استخدام أي بيانات مخزنة موجودة آنذاك لتلبية عملية تحميل الطلبية من عنوان URL.
 +
* <code>force-cache</code>: ستُستخدَم البيانات المُخزَّنة الموجودة لتلبية الطلبية بغض النظر عن عمر تلك البيانات المخزنة أو تاريخ انتهاء صلاحيتها. إن لم تتوافر بيانات في المخزن مقابلة للطلبية، فستُطلب البيانات من المصدر الأصلي آنذاك.
 +
* <code>only-if-cashed</code>: ستُستخدَم البيانات المُخزَّنة الموجودة لتلبية الطلبية بغض النظر عن عمر تلك البيانات المخزنة أو تاريخ انتهاء صلاحيتها. إن لم تتوافر بيانات في المخزن مقابلة للطلبية، فلن يُكلف عناء طلب تلك البيانات من المصدر الأصلي، وستُعد حالة الطلبية فاشلة آنذاك.
 +
 
 +
=== <code>ImageLoadEvent</code> ===
 +
كائن يعاد من رد الندار <code>onLoad</code>.
 +
{| class="wikitable"
 +
!النوع
 +
|-
 +
|كائن
 +
|}
 +
الخاصيات التي يأخذها ذلك الكائن:
 +
 
 +
* <code>width</code> (عدد): عرض الصور المحملة.
 +
* <code>height</code> (عدد): ارتفاع الصورة المحملة.
 +
* <code>uri</code> (سلسلة نصية): سلسلة نصية تمثل مصدر مُعرِّف الصورة.
 +
 
 +
=== <code>ImageSource</code> ===
 +
{| class="wikitable"
 +
!النوع
 +
|-
 +
|كائن، مصفوفة من الكائنات، عدد
 +
|}
 +
الخاصيات المتاحة (إن مُرِّر على شكل كائن أو مصفوفة من الكائنات):
 +
*<code>uri</code> (سلسلة نصية): سلسلةٌ نصّيةٌ تمثّل معرِّف مصدر الصورة (resource identifier)، والذي قد يكون عنوان http، أو مسار الملف المحلّي، أو مصدر صورة ثابت (static image resource).
 +
*<code>width</code>، <code>height</code> (عدد): يمكن تحديدها عند البناء إذا كانت معروفةً، وتُستخدم لضبط الأبعاد الافتراضيّة للمكوّن <code><Image/></code>.
 +
*<code>scale</code> (عدد): تُستخدم لتحديد مقياس رسم (scale) الصورة، والقيمة الافتراضيّة له هي 1.0 والتي تعني أنّ كل بكسل (pixel) من الصورة يقابل نقطة إظهارٍ واحدةٍ DIP.
 +
* <code>bundle</code> (سلسلة نصية): خاصة بمنصة iOS، تحدد محزِّم الأصول في iOS (أي iOS asset bundle) الذي توجد الصورة ضمنه. إن لم تحدد قيمته، فستكون <code>[NSBundle mainBundle]</code>.
 +
* <code>method</code> (سلسلة نصية): نوع طلبية HTTP المراد استعماله، وقيمته الافتراضية 'GET'.
 +
* <code>headers</code> (كائن): كائن يمثِّل ترويسات طلبية HTTP المراد إرسالها للصورة البعيدة.
 +
* <code>body</code> (سلسلة نصية): محتوى طلبية HTTP المراد إرساله مع الطلبية. يجب أن يكون سلسلة نصية مرمزة ترميزًا صالحًا عبر UTF-8، وسترسل تمامًا كما هي معطاة دون أي تطبيق أي عملية ترميز إضافية (مثل تهريب عناوين url أو ترميز base64).
 +
* <code>cache</code> (نوع <code>ImageCacheEnum</code>): خاص بمنصة iOS، تحدد كيفية معالجة استجابات أو ردود الطلبيات التي يحتمل أن تكون مخزنة مؤقتًا.
 +
الخاصيات المتاحة (إن مُرِّر على شكل عدد):
 +
 
 +
* <code>number</code>: نوع مبهم (Opaque) معاد من قبل شيءٍ ما مثل ‪.<code>require('./image.jpg')</code>
  
 
== مصادر ==
 
== مصادر ==

مراجعة 11:11، 29 سبتمبر 2021

المكوّن الخاصّ بإظهار مختلف أنواع الصّور في منصّة React، والتي تتضمّن صور الشّبكة وصور المصادر الثّابتة (static resources) والصّور المحلّيّة المؤقّتة والصّور المخزّنة على القرص المحلّي كمعرض الصور.

يبين المثال التّالي كيفيّة جلب الصّور من وسائط التّخزين المحليّة ومن الشّبكة، وكذلك من المعطيات الواردة من :data الخاصّة بعنوان uri، ثم إظهارها.

ملاحظة: يجب تحديد أبعاد الصورة يدويًّا عند جلبها من الشّبكة أو من المصدر data.

أمثلة

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  tinyLogo: {
    width: 50,
    height: 50,
  },
  logo: {
    width: 66,
    height: 58,
  },
});

const DisplayAnImage = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.tinyLogo}
        source={require('@expo/snack-static/react-native-logo.png')}
      />
      <Image
        style={styles.tinyLogo}
        source={{
          uri: 'https://reactnative.dev/img/tiny_logo.png',
        }}
      />
      <Image
        style={styles.logo}
        source={{
          uri:
            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg==',
        }}
      />
    </View>
  );
}

export default DisplayAnImage;
import React, { Component } from 'react';
import { AppRegistry, View, Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  tinyLogo: {
    width: 50,
    height: 50,
  },
  logo: {
    width: 66,
    height: 58,
  },
});

class DisplayAnImage extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image
          style={styles.tinyLogo}
          source={require('@expo/snack-static/react-native-logo.png')}
        />
        <Image
          style={styles.tinyLogo}
          source={{uri: 'https://reactnative.dev/img/tiny_logo.png'}}
        />
        <Image
          style={styles.logo}
          source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='}}
        />
      </View>
    );
  }
}

export default DisplayAnImage;

كما يمكن إضافة تنسيقٍ style للصّورة كما يلي:

import React from 'react';
import { View, Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    paddingTop: 50,
  },
  stretch: {
    width: 50,
    height: 200,
    resizeMode: 'stretch',
  },
});

const DisplayAnImageWithStyle = () => {
  return (
    <View style={styles.container}>
      <Image
        style={styles.stretch}
        source={require('@expo/snack-static/react-native-logo.png')}
      />
    </View>
  );
}

export default DisplayAnImageWithStyle;
import React, { Component } from 'react';
import { View, Image, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  stretch: {
    width: 50,
    height: 200,
    resizeMode: 'stretch'
  }
});

class DisplayAnImageWithStyle extends Component {
  render() {
    return (
      <View>
        <Image
          style={styles.stretch}
          source={require('@expo/snack-static/react-native-logo.png')}
        />
      </View>
    );
  }
}

export default DisplayAnImageWithStyle;

دعم صور GIF و WebP على منصة Android

لا تُدعم الصّور من نوع GIF والنوع WebP افتراضيًّا على منصّة Android عند بناء شفرة أصيلة شخصيّة، لذا يجب إضافة بعض الوحدات الاختياريّة على المسار android/app/build.gradle بما يتوافق مع حاجة التّطبيق.

dependencies {
  // ‫إذا كان تطبيقك يدعم إصدارات أندرويد التي تسبق الإصدار Ice Cream Sandwich (API level 14)
  implementation 'com.facebook.fresco:animated-base-support:1.3.0'

  // ‫لدعم صور GIF المتحركة
  implementation 'com.facebook.fresco:animated-gif:2.0.0'

  // ‫لدعم صور WebP بما فيها المتحركة
  implementation 'com.facebook.fresco:animated-webp:2.1.0'
  implementation 'com.facebook.fresco:webpsupport:2.0.0'

  // ‫لدعم صور WebP دون الصور المتحركة منها
  implementation 'com.facebook.fresco:webpsupport:2.0.0'
}

الخاصيات

يرث خاصيات المكون View.

accessible

لتحديد قابليّة الوصول للصّورة، إذ يمكن الوصول إلى الصّورة إذا كانت قيمتها true.

النوع مطلوب المنصة
(bool) لا iOS

accessibilityLabel

النّص الذي سيقرؤه تطبيق قارئ الشّاشة (screen reader) عندما يتفاعل المستخدم مع الصّورة.

النوع مطلوب المنصة
سلسلة نصية (string) لا iOS

blurRadius

نصف قطر التّمويه (blur) المطبّق على الصورة.

النوع مطلوب
عدد (number) لا

ملاحظة: يجب أن تكون قيمة blurRadius أكبر من 5 على منصّة iOS.

capInsets

لتثبيت أبعاد الحواف المحدّدة في capInsets عند تغيير حجم الصّورة، بينما تتمدّد باقي أجزاء الصّورة، وبالتّالي تفيد هذه الخاصيّة في إنشاء عناصر مفيدةٍ متغيّرة الحجم ودائريّة الحوافّ، مثل: الأزرار، والظّلال وغيرها، ويمكن الاطلاع على التّوثيق الرسمي لشركة Apple لمزيدٍ من المعلومات.

النوع مطلوب المنصة
Rect لا iOS

defaultSource

لعرض الصّورة الثّابتة بينما يحمّل مصدر الصّورة.

النوع مطلوب
ImageSource (انظر في الأسفل) لا

ملاحظة: يتم تجاهل هذه الخاصية أثناء البناء الاختباريّ على منصة Android.

fadeDuration

تعمل على منصة Android فقط، وقيمتها الافتراضية هي 300 ميلي ثانية.

النوع مطلوب المنصة
عدد (number) لا Android

loadingIndicatorSource

تمثّل هذه الخاصية - التي تشبه الخاصّية Source مصدر المستخدم في إظهار مؤشر تحميل الصورة، والذي سيظهَر إلى أن تجهز الصورة للعرض، أي حتى انتهاء تحميلها من الشّبكة.

النوع مطلوب
ImageSource (مع uri فقط، انظر في الأسفل)، أو عدد لا

onError

تُستدعى عند حدوث خطأ في التّحميل.

النوع مطلوب
دالة (function)
({ nativeEvent: { error } }) => void
لا

onLayout

تُستدعى وذلك عند وصل المكون (عرضه) أو عند تغيّر التخطيط.

النوع مطلوب
دالة (function)
({ nativeEvent: LayoutEvent }) => void
لا

onLoad

تُستدعى عند اكتمال التّحميل بنجاح.

النوع مطلوب
دالة (function)
(ImageLoadEvent) => void
لا

onLoadEnd

تُستدعى عند اكتمال التّحميل سواء أكان ناجحًا أو فاشلًا.

النوع مطلوب
دالة (function)
() => void
لا

onLoadStart

تُستدعى عند بدء التحميل، مثال: ‪onLoadStart={(e) => this.setState({loading: true})}

النوع مطلوب
دالة (function)
() => void
لا

onPartialLoad

تُستدعى عند اكتمال تحميل الصّورة جزئيًّا، ويتعلّق تعريف هذا التّحميل الجزئي بالمُحمِّل (loader)، وتستخدم هذه الخاصيّة مع التحميلات المتقدّمة (progressive) لصور JPEG.

النوع مطلوب المنصة
دالة (function)
() => void
لا iOS

onProgress

تُستدعى عند تقدم التّحميل.

النوع مطلوب المنصة
دالة (function)
({ nativeEvent: { loaded, total } }) => void
لا iOS

progressiveRenderingEnabled

تعمل على منصّة Android فقط، وتُستخدم لتمكين تدفّق (streaming) صور JPEG المتقدم. ويمكن زيارة Progressive JPEGs لمزيد من المعلومات.

النوع مطلوب المنصة
قيمة منطقية (bool) لا Android

resizeMethod

تحدّد الطريقة المستخدمة في تغيير أبعاد الصّورة المحمّلة في حال اختلاف أبعادها عن أبعاد واجهة الصورة:

  • auto: وهي الطّريقة الافتراضيّة، وتقوم على التّجريب للاختيار بين الطّريقتين resize، وscale.
  • resize: عمليّةٌ برمجيّةٌ تعالج الصّورة المرمّزة (encoded) في الذّاكرة قبل فكّ ترميزها، ويجب استخدامها بدلًا من scale عندما تكون الصّورة أكبر من الواجهة.
  • scale: ترسم الصّورة مكبّرةً أو مصغّرة، وهي أسرع من الطّريقتين السّابقتين كونها تَستخدم مسرّع الجهاز الرّسومي (usually hardware accelerated )، وتُنتج صورًا ذات جودةٍ أعلى، كما تستخدَم عندما تكون الصّور أصغر من الواجهة أو أكبر قليلًا.

ويمكن زيارة Resizing لمزيد من المعلومات حول resize، وscale.

النوع مطلوب المنصة
('auto', 'resize', 'scale') لا Android

resizeMode

تحدّد الطّريقة التي ستُستخدم لتغيير أبعاد الصّورة الأوّليّة (raw image) في حال اختلاف أبعادها عن أبعاد إطار (frame) الواجهة:

  • cover: وهي الطّريقة الافتراضيّة، حيث تغيّر مقياس رسم (scale) الصّورة بانتظامٍ (يحافظ على نسبة ارتفاع الصّورة إلى عرضها (aspect ratio))، بحيث تصبح أبعاد الصّورة أكبر أو تساوي أبعاد الواجهة (بعد طرح الحواشي (padding)).
  • contain: تغيّر مقياس رسم (scale) الصورة بانتظام (يحافظ على نسبة ارتفاع الصّورة إلى عرضها (aspect ratio))، بحيث تصبح أبعاد الصّورة أصغر أو تساوي أبعاد الواجهة (بعد طرح الحواشي (padding)).
  • stretch: تغيّر ارتفاع الصورة وعرضها بشكلٍ مستقلٍ (independently)، مما قد يؤدي لتغيير نسبة ارتفاع الصورة إلى عرضها.
  • repeat: تكرر الصورة حتى تغطي كامل إطار الواجهة مع المحافظة على أبعادها إذا كانت أصغر من الواجهة؛ أمّا إذا كانت أكبر منها فستغيّر مقياس رسم الصّورة بانتظام بحيث تحتويها الواجهة.
  • center: تضع الصورة في مركز الإطار بحيث تكون أبعادها موازيةً لأبعاد الواجهة إذا كانت أصغر منها؛ أمّا إذا كانت أكبر منه فستغيّر مقياس رسم الصّورة بانتظامٍ بحيث تحتويها الواجهة.
النوع مطلوب
('cover', 'contain', 'stretch', 'repeat', 'center') لا

source

تمثّل هذه الخاصيّة مصدر الصّورة، سواء كان عنوان URL بعيدًا (remote) أو ملفًّا محلّيًّا (local).

كما يمكن أن تتضمن هذه الخاصيّة العديد من عناوين URL البعيدة مع تحديد العرض، والارتفاع وربّما مقياس الرّسم وغيرها من معاملات URL، فيقوم التّطبيق الأصيل باختيار أفضل uri ليعرضه وذلك اعتمادًا على أبعاد حاوية الصورة (image container)، كما يمكن إضافة الخاصية cache للتحكم بكيفيّة تفاعل الطّلبات الشّبكيّة مع التخزين المحلّيّ المؤقّت (local cache). ويمكن الإطلاع على التحكم بالتخزين المؤقت للصور لمزيد من المعلومات.

صيغ الصّور (format) المدعومة حاليًّا على منصّة Android هي: (png, jpg,jpeg, bmp, gif,webp)، والصيغة psd على منصة iOS. كما تدعم منصة iOS العديد من صيغ الصّور الصّرفة (RAW أي ذات الصيغة الثنائية)، ويمكن الرّجوع إلى توثيق شركة Apple للإطلاع على قائمة الكاميرات المدعومة (وفيما يخص الإصدار iOS 12 فيمكن زيارة support apple).

النوع مطلوب
ImageSource لا

style

تُستخدم لتنسيق الصورة.

النوع مطلوب
إحدى خاصيّات التّنسيق: لا

testID

معرِّف فريد لهذا العنصر يستخدم سكربتات اختبار أتمتة واجهة المستخدم.

النوع
سلسلة نصية (string)

التوابع

abortPrefetch()‎

Image.abortPrefetch(requestId);

يلغي طلبات الجلب المسبق للصّور، ويعمل على منصّة Android فقط.

المعاملات

الاسم النوع مطلوب الوصف
requestId عدد (number) نعم المعرف ID المعاد من ()prefetch

getSize()‎

Image.getSize(uri, success, [failure]);

يعيد ارتفاع وعرض الصّورة بالبكسل قبل إظهارها، ويمكن أن يفشل عند عدم وجود الصورة، أو فشل تحميلها.

يجب تحميل الصّورة في البداية، ثم تخزينها مؤقّتًا قبل تمكُّن هذا التّابع من استرجاع أبعادها، ممّا يعني أنّه يمكن من حيث المبدأ استخدام هذا التّابع لتحميل الصّورة مسبقًا (preload)، ومع ذلك فهو ليس الأمثل لهذا الغرض، ويمكن في المستقبل أن يُبرمَج بحيث لا يحتاج لتحميل كامل معطيات الصورة. ويفضل تحميل الصّور مسبقًا عن طريق واجهة برمجيّة مستقلة.

المعاملات التي يأخذها:

الاسم النوع مطلوب الوصف
uri سلسلة نصية (string) نعم موقع الصورة
success دالة (function) نعم الدالة التي ستطلب عند إيجاد الصورة بنجاحٍ واستعادة ارتفاعها وعرضها
failure دالة (function) لا الدالة التي ستطلب عند حدوث خطأ كالفشل في استعادة الصورة

getSizeWithHeaders()‎

Image.getSizeWithHeaders(uri, headers, success, [failure]);

يعيد ارتفاع الصّورة وعرضها بالبكسل قبل إظهارها مع إمكانية إعطاء الترويسات (headers) للطلب، ويمكن أن يفشل عند عدم وجود الصورة أو فشل تحميلها.

يجب تحميل الصورة في البداية، ثمّ تخزينها بشكلٍ مؤقّتٍ قبل تمكُّن هذا التّابع من استرجاع أبعادها، ما يعني أنه يمكن من حيث المبدأ استخدام هذا التابع لتحميل الصّورة مسبقًا (preload)، غير أنّه ليس الأمثل لهذا الغرض، ويمكن في المستقبل أن يُبرمَج بحيث لا يحتاج لتحميل كامل معطيات الصورة. ويفضل أن تحمّل الصور مسبقًا عن طريق واجهة برمجية مستقلة.

المعاملات التي يأخذها:

الاسم النوع مطلوب الوصف
uri سلسلة نصية (string) نعم موقع الصورة
headers كائن (object) نعم ترويسة الطلب
success دالة (function) نعم الدالة التي ستطلب عند إيجاد الصورة بنجاح واستعادة ارتفاعها وعرضها
failure دالة (function) لا الدالة التي ستطلب عند حدوث خطأ كالفشل في استعادة الصورة

prefetch()‎

Image.prefetch(url);

يجلب الصّور مسبقًا (prefetche) ويخزّنها على قرص التّخزين المؤقت (disk cache) لتُستخدم فيما بعد.

المعاملات

الاسم النوع مطلوب الوصف
url سلسلة نصية (string) نعم العنوان البعيد لموقع الصورة
callback دالة (function) على منصة آندرويد لا الدالة التي ستسدعى مع المُعرِّف requestId.

queryCache()‎

Image.queryCache(urls);

يتحقّق من التّخزين المؤقت، ثمّ يعيد ربطًا (mapping) بين عنوان URL وحالة التّخزين المؤقّت (cache status) له، مثلًا على القرص disk أم على الذاكرة memory، وإذا لم يوجد عنوان محدّد في كتلة الربط تلك، فهذا يعني عدم وجوده في المخزن المؤقت.

المعاملات التي تأخذها:

الاسم النوع مطلوب الوصف
urls مصفوفة (array) نعم قائمة عناوين URL لفحص التخزين المؤقت

resolveAssetSource()‎

Image.resolveAssetSource(source);

يعيد المرجع المساعد (asset reference) على شكل كائن له الخاصيّات uri، وwidth، وheight.

المعاملات التي تأخذها:

الاسم النوع مطلوب الوصف
source ImageSource، عدد (number) نعم العدد من النوع المبهم الذي تعيده ‪require('./image.jpg')

أو الكائن ImageSource

تعريفات الأنواع

ImageCacheEnum (خاصة بمنصة iOS)

تعداد enum يمكن استخدامه لضبط عملية معالجة التخزين المؤقت أو ضبط أسلوب لمعالجة الاستجابات التي يحتمل أنها جُلبت وخُزِّنت مؤقتًا.

النوع القيمة الافتراضية
إحدى القيم التالية:

(‎'default', 'reload', 'force-cache', 'only-if-cached'‎)

'default'
  • default: استخدم الأسلوب الافتراضي الذي توفره المنصة الأصيلة.
  • reload: البيانات أو عنوان URL الذي سيُحمَّل من المصدر الأصلي. لا يفترض استخدام أي بيانات مخزنة موجودة آنذاك لتلبية عملية تحميل الطلبية من عنوان URL.
  • force-cache: ستُستخدَم البيانات المُخزَّنة الموجودة لتلبية الطلبية بغض النظر عن عمر تلك البيانات المخزنة أو تاريخ انتهاء صلاحيتها. إن لم تتوافر بيانات في المخزن مقابلة للطلبية، فستُطلب البيانات من المصدر الأصلي آنذاك.
  • only-if-cashed: ستُستخدَم البيانات المُخزَّنة الموجودة لتلبية الطلبية بغض النظر عن عمر تلك البيانات المخزنة أو تاريخ انتهاء صلاحيتها. إن لم تتوافر بيانات في المخزن مقابلة للطلبية، فلن يُكلف عناء طلب تلك البيانات من المصدر الأصلي، وستُعد حالة الطلبية فاشلة آنذاك.

ImageLoadEvent

كائن يعاد من رد الندار onLoad.

النوع
كائن

الخاصيات التي يأخذها ذلك الكائن:

  • width (عدد): عرض الصور المحملة.
  • height (عدد): ارتفاع الصورة المحملة.
  • uri (سلسلة نصية): سلسلة نصية تمثل مصدر مُعرِّف الصورة.

ImageSource

النوع
كائن، مصفوفة من الكائنات، عدد

الخاصيات المتاحة (إن مُرِّر على شكل كائن أو مصفوفة من الكائنات):

  • uri (سلسلة نصية): سلسلةٌ نصّيةٌ تمثّل معرِّف مصدر الصورة (resource identifier)، والذي قد يكون عنوان http، أو مسار الملف المحلّي، أو مصدر صورة ثابت (static image resource).
  • width، height (عدد): يمكن تحديدها عند البناء إذا كانت معروفةً، وتُستخدم لضبط الأبعاد الافتراضيّة للمكوّن <Image/>.
  • scale (عدد): تُستخدم لتحديد مقياس رسم (scale) الصورة، والقيمة الافتراضيّة له هي 1.0 والتي تعني أنّ كل بكسل (pixel) من الصورة يقابل نقطة إظهارٍ واحدةٍ DIP.
  • bundle (سلسلة نصية): خاصة بمنصة iOS، تحدد محزِّم الأصول في iOS (أي iOS asset bundle) الذي توجد الصورة ضمنه. إن لم تحدد قيمته، فستكون [NSBundle mainBundle].
  • method (سلسلة نصية): نوع طلبية HTTP المراد استعماله، وقيمته الافتراضية 'GET'.
  • headers (كائن): كائن يمثِّل ترويسات طلبية HTTP المراد إرسالها للصورة البعيدة.
  • body (سلسلة نصية): محتوى طلبية HTTP المراد إرساله مع الطلبية. يجب أن يكون سلسلة نصية مرمزة ترميزًا صالحًا عبر UTF-8، وسترسل تمامًا كما هي معطاة دون أي تطبيق أي عملية ترميز إضافية (مثل تهريب عناوين url أو ترميز base64).
  • cache (نوع ImageCacheEnum): خاص بمنصة iOS، تحدد كيفية معالجة استجابات أو ردود الطلبيات التي يحتمل أن تكون مخزنة مؤقتًا.

الخاصيات المتاحة (إن مُرِّر على شكل عدد):

  • number: نوع مبهم (Opaque) معاد من قبل شيءٍ ما مثل ‪.require('./image.jpg')

مصادر