ראינו איך לעצב את המסך עם 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 אחד בתוך השני. מכיוון שקומפוננטה יכולה להחזיר רכיב אחד, כדי להחזיר כמה רכיבים ביחד, אפשר לעטוף […]

React Native היא פלטפורמה לבניית אפליקציות אנדרואיד ואייפון. בעבר בניית אפליקציות שיתאימו לאנדרואיד ו-iOS הצריכה בנייה של שתי אפליקציות בטכנולוגיות שונות. React Native מאפשרת בנייה של אפליקציה אחת שמתאימה לשתי מערכות ההפעלה. כדי להשתמש ב-React Native כדאי שתהיה הבנה ב-JS וב-React. Expo היא פלטפורמת קוד פתוח שמספקת כלים שנבנו לעבודה עם React Native ומפשטים את […]