من السهل إضافة الصور إلى تطبيق React Native الخاص بك. احصل على جميع الميزات والمخرجات على مكون الصورة المدمج.

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

مكون الصورة الأصلية المتفاعل

مكوّن React Native image هو المكون الافتراضي الذي توفره مكتبة React Native لعرض الصور في تطبيقات الهاتف المحمول الخاصة بك. يمكن للمكون تحميل الصور من المصادر المحلية والبعيدة. يوفر العديد من الدعائم لتخصيص وتصميم الصور المقدمة.

لاستخدام مكون الصورة في تطبيقك ، قم باستيراد صورة من رد فعل أصلي مكتبة:

يستورد تتفاعل من'تتفاعل';
يستورد {StyleSheet، Image، View} من"رد فعل أصلي";
مقدار ثابت التطبيق = () => {
يعود (

 النمط = {styles.image}
 المصدر = {يتطلب("./assets/my-image.jpg")}
 />
 </View>
 );
};
مقدار ثابت الأنماط = StyleSheet.create ({
 حاوية: {
 ثني: 1,
 العناصر: 'مركز',
 تبرير المحتوى: 'مركز',
 },
 صورة: {
 عرض: 200,
 ارتفاع: 200,
 الحدود: 100,
 },
});

أعلاه بسيط برنامج مكون مع صورة. ال صورة المكون يأخذ أ

instagram viewer
أسلوب الدعامة التي تحدد ال عرض, ارتفاع، و الحدود من الصورة. يستغرق أيضًا مصدر prop الذي يقوم بتحميل الصورة من ملف محلي موجود في مجلد "الأصول" داخل دليل التطبيق. ال مصدر تحدد الخاصية مسار الصورة المراد تضمينها ويمكنها قبول مصادر الصور المحلية والشبكة / البعيدة.

الصور المحلية متوفرة على جهاز المستخدم ويمكنك تخزينها إما بشكل مؤقت أو دائم. يمكنك تخزين الصور المحلية داخل دليل مشروع التطبيق ، مثل ملف أصول مجلد. يمكنك أيضًا تحديد موقع الصور خارج دليل التطبيق ، كما هو الحال في ألبوم الكاميرا أو مكتبة الصور بالجهاز. فيما يلي مثال على مسار المصدر لصورة محلية:

uri: "ملف: ///path/to/my-image.jpg" }} />

يتم تسليم صور الشبكة عبر الويب. يمكن أن تتضمن عناوين URL لـ HTTP / HTTPS أو عناوين URI للبيانات المشفرة باستخدام base64 ، والتي تقوم بتضمين البيانات مباشرة في عنوان URL باستخدام نظام تشفير Base64.

الدعائم لتخصيص مكون الصورة

هناك العديد من الدعائم التي يمكنك استخدامها لتصميم وتخصيص مكون React Native Image.

تغيير الحجم

ال تغيير الحجم تحدد الخاصية كيف يجب على React تغيير حجم الصورة ووضعها داخل حاويتها. هناك العديد من القيم المتاحة لـ تغيير الحجم، سيؤثر كل منها على الصورة بشكل مختلف.

  • غطاء: ستعمل هذه القيمة على قياس الصورة بشكل موحد بحيث يكون كلا البعدين مساويًا أو أكبر من العنصر الذي يحتوي عليه. ثم يتم توسيط الصورة داخل الحاوية. يمكن أن يؤدي استخدام هذه القيمة إلى اقتصاص الصورة للحفاظ على نسبة العرض إلى الارتفاع.
  • يحتوي: سيحاول هذا ملاءمة الصورة وتوسيطها تمامًا داخل أبعاد الحاوية. ومع ذلك ، قد ينتج عن ذلك مساحة فارغة حول حواف الصورة.
  • تمتد: ال تمتد تمد القيمة الصورة لملء الحاوية بأكملها ، بغض النظر عن نسبة العرض إلى الارتفاع. يؤدي في بعض الأحيان إلى تشويه الصورة.
  • يكرر: هذه القيمة تكرر الصورة أفقيًا وعموديًا لملء الحاوية بأكملها.
  • مركز: سيؤدي هذا إلى توسيط الصورة داخل عنصر الحاوية دون تغيير حجمها.

عند التحميل

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

onError

ال onError سيتم تشغيل الدعامة إذا أو عندما يفشل تحميل الصورة. يوفر طريقة لأداء الإجراءات الضرورية إذا كان هناك خطأ أثناء محاولة تحميل الصورة. يمكنك عرض رسالة خطأ للمستخدم أو إعادة محاولة تحميل الصورة.

المصدر الافتراضي

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

التعامل مع الصور البعيدة من API

قد تحتاج إلى الحصول على صورة لتطبيقك من واجهة برمجة تطبيقات أو خادم بعيد وعرضها داخل تطبيقك. يمكنك استخدام React المضمنة أحضر وظيفة أو تطلب API مكتبة مثل Axios لهذا الغرض.

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

مقدار ثابت [imageUri، setImageUri] = useState (باطل);
useEffect (() => {
 أحضر(' https://example.com/api/images/1')
 .ثم(إجابة => response.json ())
 .ثم(بيانات => setImageUri (data.url))
 .يمسك(خطأ =>وحدة التحكم. Error (error))؛
}, []);
يعود (

 {imageUri؟ (
uri: imageUri}} />
 ): (
جارى التحميل .../Text>
 )}
 </View>
);

سيؤدي تشغيل هذا الرمز داخل تطبيقك إلى جلب صورة من رابط API البعيد المحدد. ينشئ المثال أولاً متغير حالة لـ imageUri. داخل أ useEffect هوك ، ال أحضر تسترجع الدالة imageUri وتخزنها في متغير الحالة باستخدام setImageUri ().

أخيرًا ، فإنه يجعل صورة المكون مع مصدر يتم تعيين prop على URI للصورة أثناء عرض مؤشر التحميل ، في انتظار ظهور الصورة.

استخدام دعم نهج ذاكرة التخزين المؤقت للتحكم في سلوك ذاكرة التخزين المؤقت

يمكن لمتصفحك تخزين الصور التي يتم تحميلها من عناوين URL البعيدة مؤقتًا ، حتى يتمكن من تحميلها مرة أخرى بسرعة في المستقبل. يمكنك تخصيص سلوك الصورة المخبأة باستخدام امتداد مخبأ دعم. يمكن أن تحدد هذه الخاصية كيف ينبغي للمتصفح تخزين الصورة مؤقتًا وكيف يجب أن يبطل ذاكرة التخزين المؤقت هذه.

يمكن أن تأخذ خاصية ذاكرة التخزين المؤقت قيمًا مثل الافتراضي ، إعادة التحميل ، فرض ذاكرة التخزين المؤقت ، و فقط في حالة التخزين المؤقت.

فيما يلي مثال على كيفية استخدام ملف مخبأ prop للتحكم في سلوك ذاكرة التخزين المؤقت للصورة:

 المصدر = {{
 uri: ' https://example.com/images/my-image.png',
 مخبأ: "مخبأ القوة",
 مفتاح التخزين المؤقت: 'صورتي',
 ثابت: حقيقي
 }}
/>

ال مخبأ تم تعيين الخاصية على "مخبأ القوة"، مما يشير إلى أنه يجب على المتصفح تحميل الصورة من ذاكرة التخزين المؤقت إذا كانت متوفرة ، حتى إذا كانت نسخة ذاكرة التخزين المؤقت قديمة.

دعامة جديدة cacheKey يلعب هنا أيضًا. تم تعيينه على 'صورتي'، والذي سيكون بمثابة مفتاح ذاكرة تخزين مؤقت مخصص يمكنك استخدامه للإشارة إلى الصورة المخبأة لاحقًا.

أيضا ، ثابت تم تعيين الخاصية على حقيقي، الأمر الذي يخبر المتصفح بالتعامل مع إدخال ذاكرة التخزين المؤقت هذا على أنه غير قابل للتغيير ولا يبطله أبدًا.

كل شيء عن الصور

يوفر مكون React Native Image وسيلة قوية ومرنة لعرض الصور ، بما في ذلك التصميم والتعامل مع الصور البعيدة والتحكم في سلوك ذاكرة التخزين المؤقت.

بالنسبة للصور البعيدة ، يمكنك دائمًا استخدام عنصر نائب لعرض صورة مؤقتة أو نص أثناء تحميل الصورة البعيدة. سيؤدي ذلك إلى إنشاء تجربة مستخدم أفضل من خلال تقديم ملاحظات مرئية فورية ومنع التطبيق من الظهور غير مستجيب.