כיצד להשתמש בספריית רכיבי React Native Elements באפליקציה לנייד שלך

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

כאן תלמדו כיצד להשתמש בספריית הרכיבים React Native Elements בעת בניית אפליקציית React Native הבאה שלכם.

מה זה React Native Elements?

React Native Elements (RNE) הוא מאמץ בקוד פתוח של מפתחי React Native ליצור ספריית רכיבים שיכולה להיות שימושית בעת בניית אפליקציות אנדרואיד, iOS ואינטרנט. לא כמו הרבה ספריות רכיבים אחרות של React Native, RNE תומך בתחביר TypeScript.

הספרייה מורכבת מ-30 רכיבים המתמקדים במבנה הרכיבים.

התקנת Reactive Native Elements עם ה-React Native CLI

ההוראות הבאות הן להתקין את React Native Elements בפרויקט שנוצר באמצעות ה-React Native cli.

התקן את React Native Elements באפליקציית React Native החשופה שלך על ידי הפעלת:

npm להתקין @rneui/themed @rneui/base 

אתה צריך גם להתקין סמלים-react-native-vector and safe area-context:

npm להתקין לְהָגִיב-יָלִיד-וקטור-אייקונים מגיבים-יָלִיד-בטוח-אֵזוֹר-הֶקשֵׁר

כיצד להתקין React Native Elements בפרויקט אקספו

כדי להתקין את React Native Elements במכשיר קיים תערוכה פרויקט, התקן את החבילה ו-react-native-safe-area-context:

להוסיף חוט @rneui/themed @rneui/base react-יָלִיד-אזור בטוח-הקשר

שמור על מנהל חבילות אחד כמו npm או yarn בזמן התקנת חבילות כדי להתחמק מהסיכון של התנגשויות תלות.

לפרויקטים שנבנו באמצעות ה-expo cli יש אייקוני react-native-vector מותקנים כברירת מחדל, כך שאינך צריך להתקין אותו.

עיצוב רכיבי אלמנטים מקוריים עם תגובה יחידה

כל הרכיבים הזמינים דרך RNE לוקחים אביזרים שונים לעיצוב הרכיב והמיכל של הרכיב.

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

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

כל אלה הם סגנונות חיצוניים עבור הרכיב.

לדוגמה, עיצוב את לַחְצָן רְכִיב:

יְבוּא { נוף } מ "תגובה-יליד";
יְבוּא { כפתור } מ "@rneui/themed";
const MyComponent = () => {
לַחֲזוֹר (
<נוף>
<לַחְצָן
 buttonStyle={{ רקע צבע: "אפור" }}
 containerStyle={{ width: 150 }}
>
 כפתור מוצק
</Button>
<לַחְצָן
 סוג="מתווה"
 containerStyle={{ width: 150, margin: 10 }}
 כותרת="כפתור מתאר"
 />
</View>
 );
}

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

יצירת ערכות נושא עבור רכיבי React Native Elements

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

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

כדי ליצור ערכת נושא, התקשר createTheme() והעבירו את סגנונות הנושא הרצויים כארגומנט פונקציה:

יְבוּא { ThemeProvider, createTheme } מ '@rneui/themed';
const theme = createTheme({
 רכיבים: {
 לחצן: {
 סגנון מיכל: {
 שוליים: 10,
 },
 סגנון כותרת: {
 צֶבַע: "שָׁחוֹר",
 },
 },
 },
});

ה ThemeProvider יחיל סגנונות על כל רכיב העטוף בתוכו.

הספק מקבל את א נושא prop שמוגדר לנושא שנוצר לעיל:

<ThemeProvider theme={theme}>
<כותרת הכפתור="כפתור נושא" />
</ThemeProvider>
<כותרת הכפתור="כפתור רגיל" />

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

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

דוגמא:

// נושא
const theme = createTheme({
 רכיבים: {
 לחצן: {
 סגנון מיכל: {
 שוליים: 10,
 צבע רקע: "אָדוֹם",
 },
 },
 },
});
//Component
<ThemeProvider theme={theme}>
<כותרת הכפתור="כפתור נושא" color={"מִשׁנִי"}/>
</ThemeProvider>

בקוד לעיל, צבע הרקע של ה- לַחְצָן הרכיב יהיה משני, שהוא צבע ירוק בניגוד לסגנון הנושא של אדום.

א נושא האובייקט נשלח עם RNE, ומספק ערכי צבע ברירת מחדל רבים מהקופסה. RNE מספק אפשרויות שונות כמו ThemeConsumer רְכִיב, useTheme() וו, ו makeStyles() מחולל וו לגישה ל נושא לְהִתְנַגֵד.

ה ThemeConsumer רכיב יעטוף את הרכיבים שלך שיוצגו בפונקציה אנונימית. פונקציה אנונימית זו לוקחת נושא בתור אביזר.

אתה יכול לגשת לערכי הנושא באמצעות א סִגְנוֹן לִתְמוֹך:

יְבוּא לְהָגִיב מ 'לְהָגִיב';
יְבוּא { כפתור } מ 'תגובה-יליד';
יְבוּא { ThemeConsumer } מ '@rneui/themed';
const MyComponent = () => (
<ThemeConsumer>
 {({ נושא }) => (
<כותרת הכפתור="ThemeConsumer" style={{ color: theme.colors.primary }} />
 )}
</ThemeConsumer>
)

לחלופין, אתה יכול להשתמש ב- useTheme() וו כדי לגשת לערכת הנושא בתוך רכיב.

לדוגמה:

יְבוּא לְהָגִיב מ 'לְהָגִיב';
יְבוּא { כפתור } מ 'תגובה-יליד';
יְבוּא { useTheme } מ '@rneui/themed';
const MyComponent = () => {
const { theme } = useTheme();
לַחֲזוֹר (
<הצג style={styles.container}>
<כותרת הכפתור="useTheme" style={{ color: theme.colors.primary }}/>
</View>
 );
};

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

הרחבת ערכות נושא עם TypeScript

RNE תומך בהצהרות TypeScript באפליקציה שלך, מה שמאפשר למפתחים לנצל היתרונות של שימוש בשפת TypeScript.

עם TypeScripts מיזוג הכרזה, אתה יכול להרחיב את הגדרות ערכת הנושא כדי להוסיף צבעים ואביזרים מותאמים אישית הן עבור ברירת המחדל והן עבור רכיבים מותאמים אישית של RNE.

כדי להרחיב את הצבעים בתוך אובייקט הנושא, תיצור נפרד TypeScript.ts קובץ והכריז על המודול @rneui/נושא בתוך הקובץ.

לאחר מכן תוכל להמשיך להוסיף את הצבעים המותאמים אישית שלך ולציין את הסוג הצפוי שלהם:

// **TypeScript.ts**
יְבוּא '@rneui/themed';
לְהַכרִיז מודול '@rneui/themed' {
 יְצוּא מִמְשָׁקצבעים{
 primaryLight: מחרוזת;
 SecondaryLight: מחרוזת; 
 }
}

עם מודול זה, אתה יכול להעביר את הצבעים המותאמים אישית שלך כערכים בעת יצירת ערכת נושא:

const theme = createTheme({
 צבעים: {
 אור ראשי: "",
	אור משני: ""
 },
})

כעת הצבעים המותאמים אישית הם חלק מאובייקט הנושא שלך וניתן לגשת אליהם באמצעות ThemeProvider, ThemeConsumer, או ה useTheme() וו.

רכיבי RNE לעומת תגובה רכיבים מקוריים

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