כיצד להשתמש ב-Flexbox ב-React Native

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

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

השוואת התנהגות Flexbox ב-React Native ופיתוח אתרים

אם ברצונך לארגן את תוכן הרכיב באמצעות flexbox ב-CSS רגיל, עליך להשתמש ב- תצוגה: flex תכונה.

מיכל { לְהַצִיג: להגמיש; }

אבל עם React Native, אתה לא צריך להגדיר את תצוגה: flex תכונה. הסיבה לכך היא React Native משתמשת ב-flexbox כברירת מחדל לבניית פריסות.

הנה כמה הבדלים שכדאי לזכור עליהם כיצד flexbox מתנהג כאשר משתמשים בו ליישור רכיבי HTML באפליקציות אינטרנט לעומת איך הוא מתנהג ב-React Native:

• flexDirection ברירת המחדל ל שׁוּרָה ביישומי אינטרנט אך ברירת המחדל היא טור ב-React Native.
• alignContent ברירת המחדל ל לִמְתוֹחַ ביישומי אינטרנט ו flex-start ב-React Native.
• flexShrink ברירת המחדל היא 1 ב-web ו-0 ב-React Native.

שימוש במאפייני Flexbox ב-React Native

מאפייני Flexbox מאפשרים לך לתאר כיצד ליישר את הרכיבים הצאצאים של רכיב המכולה. עליך להבין את המאפיינים הללו כדי ליצור פריסות מורכבות שמתאימות לצרכי היישום שלך.

1. שימוש במאפיין flex ב-React Native

ה לְהַגמִישׁ הנכס קובע כיצד נוף הרכיב ממלא את המסך. מאפיין זה מקבל ערך מספר שלם הגדול או שווה ל-0. הערך מציין את החלק של המסך נוף הרכיב צריך לתפוס.

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

יְבוּא לְהָגִיב מ"לְהָגִיב"
יְבוּא { StyleSheet, View } מ"תגובה-יליד"
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
לַחֲזוֹר (
 <>
צבע רקע: "#A020F0", לְהַגמִישׁ: 1}} /> 
 </>
 )
}

הנה הפלט:

כאן הקצית את ה-1 כערך הגמיש של ה- נוף רְכִיב. ה נוף הרכיב תופס את כל המסך (100%) מכיוון שפיצלת את החלל לקבוצה אחת.

בואו נסתכל על דוגמה נוספת:

יְבוּא לְהָגִיב מ"לְהָגִיב"
יְבוּא { StyleSheet, View } מ"תגובה-יליד"
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
לַחֲזוֹר (

צבע רקע: "#A020F0", לְהַגמִישׁ: 1}} />
צבע רקע: "#7cb48f", לְהַגמִישׁ: 3 }} /> 
 </View>
 )
}

הנה התוצאה:

הנה לך שניים נוף אלמנטים בתוך אחר נוף אֵלֵמֶנט. הילד הראשון מוגדר להגמיש: 1, והשני מוגדר ל גמיש: 3. ערכים אלה מחלקים את החלל בין שני הילדים. הראשון תופס 1/4 מהמסך ואילו השני תופס 3/4 מהמסך (המסך מחולק ל-4 בלוקים כי 1+3 = 4).

2. שימוש במאפיין flexDirection ב-React Native

אם תסתכל על צילום המסך שלמעלה, תראה שרכיבי הצאצא נמצאים זה על גבי זה. זוהי התנהגות ברירת המחדל של flexbox ב-React Native (flexDirection ברירת המחדל ל- טור ערך).

אתה יכול גם להגדיר את flexDirection רכוש ל שׁוּרָה, עמודה הפוכה, ו שורה-הפוך. בדוגמה הבאה, flexDirection נקבע ל שׁוּרָה, לכן רכיבי הצאצא ממוקמים זה לצד זה:

יְבוּא לְהָגִיב מ"לְהָגִיב"
יְבוּא { StyleSheet, View } מ"תגובה-יליד"
const styles = StyleSheet.create({
 מיכל: {
 צבע רקע: "#00FF00",
 לְהַגמִישׁ: 1,
 alignItems: "מֶרְכָּז",
 flexDirection: "שׁוּרָה",
 },
 כיכר: {
 צבע רקע: "#FF0000",
 רוֹחַב: 98,
 גוֹבַה: 98,
 שולים: 4,
 },
});
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
לַחֲזוֹר (




 </View>
 )
}

הנה התוצאה:

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

3. שימוש ב-justifyContent ב-React Native

ה JustifyContent מאפיין מיישר את רכיבי הצאצא של מיכל flexbox לאורך הציר הראשי. אם ה flexDirection נקבע ל טור, אז הציר הראשוני הוא הציר האנכי. אם זה מוגדר ל שׁוּרָה, אז זה אופקי.

הערכים האפשריים של JustifyContentהם flex-start, קצה גמיש, מֶרְכָּז, רווח-בין, חלל מסביב, ו שטח באופן שווה.

בדוגמה הבאה, flexDirection מוגדר לשורה ו JustifyContentנקבע ל flex-start:

יְבוּא לְהָגִיב מ"לְהָגִיב"
יְבוּא { StyleSheet, View } מ"תגובה-יליד"
const styles = StyleSheet.create({
 מיכל: {
 צבע רקע: "#00FF00",
 לְהַגמִישׁ: 1,
 justifyContent: "להתחיל להגמיש",
 flexDirection: "שׁוּרָה",
 },
 כיכר: {
 צבע רקע: "#FF0000",
 רוֹחַב: 98,
 גוֹבַה: 98,
 שולים: 6,
 },
});
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
לַחֲזוֹר (




 </View>
 )
}

הנה הפלט:

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

הגדרה JustifyContent למרכז (בעוד הציר הראשי הוא a טור) מרכז את שלושת קופסאות הילדים.

4. שימוש ב-alignItems ב-React Native

ה alignItems המאפיין קובע את מיקום הפריטים במיכל flexbox לאורך הציר המשני. זה ההפך מ JustifyContent. בדיוק כמו JustifyContent דואג ליישור האנכי, alignItems מטפל ביישור אופקי. הערכים האפשריים של alignItems הם flex-start, קצה גמיש, מֶרְכָּז, ו קו בסיס.

בדוגמה הבאה, flexDirection נקבע ל שׁוּרָה ו alignItemsנקבע ל flex-start:

יְבוּא לְהָגִיב מ"לְהָגִיב"
יְבוּא { StyleSheet, View } מ"תגובה-יליד"
const styles = StyleSheet.create({
 מיכל: {
 צבע רקע: "#00FF00",
 לְהַגמִישׁ: 1,
 alignItems: "להתחיל להגמיש",
 flexDirection: "שׁוּרָה",
 },
 כיכר: {
 צבע רקע: "#FF0000",
 רוֹחַב: 98,
 גוֹבַה: 98,
 שולים: 6,
 },
});
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
לַחֲזוֹר (





 </View>
 )
}

הנה הפלט:

אם תגדיר את flexDirection רכוש ל טור ו alignItems ל מֶרְכָּז, הקופסאות יונחו זו על גבי זו, ואלמנטי הילדים יהיו מיושרים למרכז.

5. שימוש ב-alignSelf ב-React Native

ה alignSelf מאפיין קובע כיצד ילד בודד צריך ליישר את עצמו במיכל. זה עוקף alignItems, והערכים האפשריים הם flex-start, קצה גמיש, מֶרְכָּז, ו קו בסיס.

בדוגמה הבאה, הגדרנו ברירת מחדל alignItems נכס ולעקוף אותו באמצעות alignSelf:

יְבוּא לְהָגִיב מ"לְהָגִיב"
יְבוּא { StyleSheet, View } מ"תגובה-יליד"
const styles = StyleSheet.create({
 מיכל: {
 צבע רקע: "#00FF00",
 לְהַגמִישׁ: 1,
 alignItems: "מֶרְכָּז", 
 justifyContent: "מֶרְכָּז", 
 flexDirection: "שׁוּרָה",
 },
 כיכר: {
 צבע רקע: "#FF0000",
 רוֹחַב: 98,
 גוֹבַה: 98,
 שולים: 6,
 },
});
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
לַחֲזוֹר (


alignSelf: "קצה גמיש" }]} />
alignSelf: "להתחיל להגמיש" }]} /> 
 )
}

הנה התוצאה:

מאפייני Flexbox אחרים

ישנם שני מאפיינים נוספים שבהם אתה יכול להשתמש בעת יצירת פריסת flexbox ב-React Native:

• flexWrap: למקרה שילדי מיכל יגלשו ממנו. להשתמש flexWrap כדי לציין אם יש לכווץ אותם על קו בודד או לעטוף אותם למספר שורות. ערכים אפשריים עבור flexWrap הם nowrap ו לַעֲטוֹף.
• פער: אתה משתמש ב- פער מאפיין כדי להוסיף פערים בין פריטי הרשת במיכל. הערך שלו צריך להיות גודל הפער הרצוי בין הפריטים. אתה יכול לציין את פער תכונה באמצעות יחידות CSS כמו px, em או rem.

למידע נוסף על React Native

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