פרוייקט לדוגמא ב-react native. הערות שיהיו יעילות לכתיבת אפליקציות בעתיד. פתיחת פרוייקט חדש איתחול הפרוייקט הרצת הפרוייקט Tab Navigation הדבר הראשון שנעשה הוא להציב את המסכים לניווט עם הסרגל התחתון. נעשה את זה עם expo router. נבטל את קובץ index וניצור תיקיית (tabs) בתוך תיקיית app. נוסיף את הקבצים הבאים: index.jsx, Profile.jsx, AddNew.jsx ואת layout.jsx_. […]
נדבר על ניווט שנותן לנו אפשרות לעבור בין מסכים. אחרי הפתיחה של הפרוייקט נתקין את react navigation. נתקין 2 ספריות נוספות: כדי לעבוד עם react navigation צריך קומפוננטה שעוטפת את כל האפליקציה. נשים את קוד הבסיס בקומפוננטת הפתיחה, index.jsx. בתוך NavigationContainer נוכל לשים קטעי קוד שמורכבים מנתיבי ניווט שונים. Stack Navigation העקרון של Stack Navigation […]
המטרה בחלק הזה היא להבין איך לקבל ולהכניס מידע, לטפל בשגיאות ולהציג נתונים. כדי שיהיה לנו מידע להשתמש בו, נשתמש ב-json server. הוא בחינם ויש בו מידע לדוגמא שאפשר להשתמש בו. הכתובת שנשתמש בה לשליפת נתונים היא: GET Requests פונקציית fetchData תשלוף את הנתונים על ידי פקודת fetch ואחר כך נהפוך את מה שקבלנו ל-json. […]
לקוד html יש הרבה פקדים לקבלת מידע מהמשתמש. ל-react native יש הרבה פחות אפשרויות. ל-expo יש ספרייה שמרחיבה את האפשרויות. מעבר לאפשרויות של react native יש ספריות שמטפלות בטפסים. TextInput ההוספה הבסיסית של TextInput. על מנת לראות את הרכיב יש צורך לעצב אותו. על מנת לקבל את הערך שהוכנס נשתמש ב-state. TextInput Props placeholder – […]
הצגת רשימות היא חלק חשוב בעיצוב של אתר. רשימות מציגות למשל מוצרים, אנשי קשר או כל אוסף אחר. בפרוייקט לדוגמא ראינו הצגה של רשימת רכיבים ושל שלבי ההכנה של המתכון. כדי שיהיו לי רשימות לעבוד איתן נכנסתי לאתר mockaroo וחוללתי נתונים לדוגמא. את הנתונים העתקתי לקובץ data.json בתיקייה הראשית. map כדי להציג רשימה נשתמש בפונקציית […]
כדי לאסוף את כל מה שהיה עד כה, נבנה פרויקט לדוגמא. בפרוייקט נבנה כרטיסים מעוצבים שמכילים מתכונים. הקמת פרויקט ריק נתחיל עם קוד בסיסי על המסך: השלב הבא הוא לשים את תמונות המתכונים בתיקיית assets על מנת להשתמש בהן בהמשך. בתוך תיקיית components ניצור קובץ חדש בשם: RecipeCard.js. נכניס קוד בסיסי לקומפוננטה: נייבא ונציג אותה […]
ראינו איך לעצב את המסך עם flexbox. יש בעיה אחת, אנחנו מבצעים את העיצוב ורואים אותו במכשיר לדוגמא, לא כל המכשירים זהים ויציגו את המסך באותה הצורה. המסכים יכולים להיות גדולים או קטנים יותר ורוצים ליצור עיצוב רספונסיבי. גם באותו המכשיר, משתמש יכול לסובב את המכשיר ולצפות בתוכן עם מכשיר מאונך או מאוזן. Dimensions API […]
בבסיס של עימוד מסך ב-React עומד מודל Flexbox. בעזרתו אפשר להגדיר האם הרכיבים בעמוד יוצבו לרוחב או לאורך. בעזרתו אפשר גם להגדיר בקלות את הרווחים והיישורים של הרכיבים. Flexbox מכיל container ו-items. כשעובדים עם Flexbox צריך לחשוב על הצירים שהרכיבים יושבים עליהם. בדרך כלל, הציר הראשי זורם משמאל לימין והציר המשני מלמעלה למטה. ב-React Native […]
עיצוב עיצוב ב-react native דומה לזה של עיצוב אפליקציות web. אחד ההבדלים הוא שלא משתמשים ב-CSS אלא בקוד של JS. השמות דומים ל-CSS, אבל השמות נכתבים ב-Camel Case. למשל backgroundColor במקום background-color. יש 2 גישות לעיצוב, עיצוב בתוך השורה inline וראינו דוגמאות לזה בפוסט הקודם. הגישה השנייה משתמשת ב-StyleSheet API שמאפשר להגדיר מספר עיצובים במקום […]
שלא כמו דף אינטרנט שעובד עם תגיות, אפליקציית react מציגה את רכיבי המסך על ידי קומפוננטות. ל-react יש קומפוננטות מובנות להצגת הדף. View הקומפוננטה הכי בסיסית להצגת אלמנטים על המסך. הקומפוננטה משמשת במיכל ומתפקדת בתור div. אפשר לקנן view אחד בתוך השני. מכיוון שקומפוננטה יכולה להחזיר רכיב אחד, כדי להחזיר כמה רכיבים ביחד, אפשר לעטוף […]