קל להוסיף תמונות לאפליקציית React Native שלך. קבל את כל הפרטים והיציאות על רכיב התמונה המובנה.

תמונות מספקות ערך רב ליישומים ניידים. הם יכולים לעזור להמחיש מושגים, להעביר מידע, ליצור עניין ויזואלי ולספק הקשר לתוכן ספציפי שאולי לא תרצה שמשתמשי האפליקציה שלך יחמיצו.

רכיב ה-React Native Image

רכיב התמונות של React Native הוא רכיב ברירת המחדל המסופק על ידי ספריית React Native לעיבוד תמונות באפליקציות לנייד שלך. הרכיב יכול לטעון תמונות ממקורות מקומיים ומרוחקים כאחד. הוא מספק מספר אביזרים להתאמה אישית וסגנון של התמונות שניתנו.

כדי להשתמש ברכיב התמונה באפליקציה שלך, ייבא תמונה מ ה תגובה-יליד סִפְרִיָה:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא { StyleSheet, Image, View } מ'תגובה-יליד';
const אפליקציה = () => {
לַחֲזוֹר (

 style={styles.image}
 מקור={לִדרוֹשׁ('./assets/my-image.jpg')}
 />
 </View>
 );
};
const styles = StyleSheet.create({
 מיכל: {
 לְהַגמִישׁ: 1,
 alignItems: 'מֶרְכָּז',
 justifyContent: 'מֶרְכָּז',
 },
 תמונה: {
 רוֹחַב: 200,
 גוֹבַה: 200,
 borderRadius: 100,
 },
});

למעלה הוא פשוט אפליקציה רכיב עם תמונה. ה

instagram viewer
תמונה רכיב לוקח א סִגְנוֹן אבזר שקובע את רוֹחַב, גוֹבַה, ו borderRadius של התמונה. זה גם לוקח א מָקוֹר prop שטוען את התמונה מקובץ מקומי שנמצא בתיקיית "נכסים" בתוך ספריית האפליקציה. ה מָקוֹר prop מגדיר את הנתיב של התמונה לכלול ויכול לקבל גם מקורות תמונה מקומיים וגם ברשת/מרוחק.

תמונות מקומיות זמינות במכשיר של המשתמש וניתן לאחסן אותן באופן זמני או קבוע. אתה יכול לאחסן תמונות מקומיות בתוך ספריית הפרויקט של האפליקציה, כגון נכסים תיקייה. אתה יכול גם לאתר תמונות מחוץ לספריית האפליקציה, כגון בגלגלת המצלמה או בספריית התמונות של המכשיר. הנה דוגמה לנתיב מקור לתמונה מקומית:

אורי: 'file:///path/to/my-image.jpg' }} />

תמונות הרשת מועברות דרך האינטרנט. הם יכולים לכלול כתובות URL של HTTP/HTTPS או URI נתונים מקודדים ב-base64, המטמיעים נתונים ישירות בכתובת האתר באמצעות ערכת הקידוד Base64.

אביזרים להתאמה אישית של רכיב התמונה

ישנם מספר אביזרים שבהם אתה יכול להשתמש כדי לסגנן ולהתאים אישית את רכיב ה-React Native Image.

שינוי גודל מצב

ה שינוי גודל מצב prop קובע כיצד React צריך לשנות את הגודל ולמקם תמונה בתוך המיכל שלה. ישנם מספר ערכים זמינים עבור שינוי גודל מצב, שכל אחד מהם ישפיע על התמונה בצורה שונה.

  • כיסוי: ערך זה ישנה את קנה המידה של התמונה באופן אחיד כך ששני הממדים יהיו שווים או גדולים מהאלמנט המכיל אותה. לאחר מכן התמונה ממורכזת בתוך המיכל. שימוש בערך זה יכול לגרום לחיתוך התמונה כדי לשמור על יחס הגובה-רוחב.
  • לְהַכִיל: זה ינסה להתאים ולמרכז את התמונה בצורה מושלמת במידות המיכל. עם זאת, הדבר עלול לגרום לשטח ריק סביב קצוות התמונה.
  • לִמְתוֹחַ: ה לִמְתוֹחַ value מותח את התמונה כדי למלא את כל המיכל, ללא קשר ליחס רוחב-גובה. לפעמים גורם לעיוות התמונה.
  • חזור: ערך זה חוזר על התמונה הן אופקית והן אנכית כדי למלא את כל המיכל.
  • מֶרְכָּז: פעולה זו תרכז את התמונה בתוך אלמנט המכולה מבלי לשנות את קנה המידה שלה.

onLoad

זה פונקציית התקשרות חוזרת שפועל כאשר התמונה מסתיימת לטעון. אתה יכול להשתמש בו כדי לבצע פעולות לאחר טעינת התמונה, כגון עדכון מצב הרכיב או הצגת הודעה למשתמש.

onError

ה onError prop יפעל אם או כאשר התמונה לא תצליח להיטען. זה מספק דרך לבצע פעולות נחוצות אם יש שגיאה במהלך הניסיון לטעון את התמונה. אתה יכול להציג הודעת שגיאה למשתמש או לנסות שוב לטעון את התמונה.

defaultSource

אבזר זה מציין תמונת סתירה שתוצג אם התמונה הראשית לא מצליחה להיטען. אתה יכול להשתמש בו כדי לספק תמונת ברירת מחדל או תמונת מציין מיקום בזמן שהתמונה הראשית נטענת.

טיפול בתמונות מרוחקות מ-API

ייתכן שתצטרך לקבל את התמונה עבור האפליקציה שלך מ-API או משרת מרוחק ולהציג אותה בתוך האפליקציה שלך. אתה יכול להשתמש ב-React המובנה לְהָבִיא פונקציה או א ספריית בקשות API כמו Axios למטרה זו.

להלן דוגמה כיצד לשלוף ולהציג תמונה מ-API מרוחק באמצעות ה- לְהָבִיא פוּנקצִיָה:

const [imageUri, setImageUri] = useState(ריק);
useEffect(() => {
 לְהָבִיא(' https://example.com/api/images/1')
 .לאחר מכן(תְגוּבָה => response.json())
 .לאחר מכן(נתונים => setImageUri (data.url))
 .לתפוס(שְׁגִיאָה =>לְנַחֵם.error (שגיאה));
}, []);
לַחֲזוֹר (

 {imageUri? (
אורי: imageUri }} />
 ): (
טוען...</Text>
 )}
 </View>
);

הפעלת קוד זה בתוך האפליקציה שלך תביא תמונה מקישור ה-API המרוחק שהוגדר. הדוגמה תחילה יוצרת משתנה מצב עבור imageUri. בתוך א useEffect וו, ה לְהָבִיא הפונקציה מאחזרת את imageUri ומאחסנת אותו במשתנה המצב באמצעות setImageUri().

לבסוף, זה הופך את תמונה רכיב עם ה מָקוֹר prop מוגדר ל-URI של התמונה בזמן שמחוון טעינה מוצג, ממתין להצגת התמונה.

שימוש בפרוטוקול מדיניות המטמון כדי לשלוט בהתנהגות המטמון

הדפדפן שלך יכול לשמור תמונות שהוא טוען מכתובות URL מרוחקות, כך שהוא יכול לטעון אותן שוב במהירות בעתיד. אתה יכול להתאים אישית את ההתנהגות של התמונה המאוחסנת במטמון באמצעות ה מטמון לִתְמוֹך. אביזר זה יכול לציין כיצד דפדפן צריך לשמור את התמונה במטמון וכיצד הוא צריך לבטל את התוקף של המטמון הזה.

אבזר המטמון יכול לקחת ערכים כמו default, reload, force-cache, ו רק אם שמור במטמון.

הנה דוגמה כיצד להשתמש ב- מטמון אבזר כדי לשלוט בהתנהגות המטמון של תמונה:

 מקור={{
 אורי: ' https://example.com/images/my-image.png',
 מטמון: 'כוח מטמון',
 cacheKey: 'התדמית שלי',
 בלתי ניתן לשינוי: נָכוֹן
 }}
/>

ה מטמון הנכס מוגדר ל 'כוח מטמון', מה שמציין שהדפדפן צריך לטעון את התמונה מהמטמון אם היא זמינה, גם אם גרסת המטמון הזו ישנה.

אביזר חדש cacheKey הוא גם במשחק כאן. הוא מוגדר ל 'התדמית שלי', אשר ישמש כמפתח מטמון מותאם אישית שבו תוכל להשתמש כדי להתייחס לתמונה השמורה מאוחר יותר.

וגם ה בלתי ניתן לשינוי הנכס מוגדר ל נָכוֹן, שאומר לדפדפן להתייחס לערך המטמון הזה כבלתי ניתן לשינוי ולעולם לא לבטל אותו.

כל מה שיש על תמונות

רכיב ה-React Native Image מספק אמצעי רב עוצמה וגמיש להצגת תמונות, כולל עיצוב, טיפול בתמונות מרוחקות ושליטה בהתנהגות המטמון.

עבור תמונות מרוחקות, תמיד תוכל להשתמש במציין מיקום כדי להציג תמונה או טקסט זמניים בזמן שהתמונה המרוחקת נטענת. זה ייצור חווית משתמש טובה יותר על ידי מתן משוב ויזואלי מיידי ומניעת מראה של האפליקציה לא מגיבה.