Table of Contents

מדוע מבנה אינדיאני מודולרי הוא חיוני עבור סקלאה

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

  • (ב) ,0) פיתוח עצמאי של ההרחבה: צוותים יכולים לעבוד על מודולים נפרדים מבלי לדרוך על אחד מהם.
  • (FLT:0) אחריות על פני מסכים ואפליקציות ב- 1 ) מרכיבים משותפים, קובצים, ואמצעים חיים במקומות ייעודיים.
  • (ב) ניתן לבחון כל מודול בבידוד, צמצום רדיוס הפיצוץ של רגרסנס.
  • (ה) אימוץ של דפוסים חדשים (FLT:0) – מתן או הגירה של מודול בודד הוא הרבה פחות מסוכן מאשר כתיבת האפליקציה כולה.
  • (FLT:0) מודלים מנטליים קלירים (FLT:1) - מהנדסים חדשים על הסיפון מהר יותר כאשר הם יכולים סיבה לגבי חלקי האפליקציה מבלי לקרוא את כל הבסיס.

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

עקרונות הליבה של תגובה מודולרית אדריכלות Native

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

הפרדה של דאגות

לכל מודול צריך עבודה יחידה, מוגדרת היטב.לדוגמה, סעיף 1 (FLT:0) צריך רק להתמודד עם שיחות API וטרנספורמציה נתונים עבור נקודות קצה הקשורות למשתמש; זה לא צריך להפוך את UI. באופן דומה, רכיב FLT:1 צריך רק לטפל מצגת ופריסה, לא להביא נתונים מהשרת.

סליחות

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

תלות הדדית

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

שקיפות על האמנה

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

מבנה הפרויקט: עמוק

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

my-react-native-app/
├── assets/
│ ├── fonts/
│ ├── images/
│ └── lottie/
├── src/
│ ├── components/ # Reusable UI primitives
│ ├── screens/ # Top-level route components
│ ├── navigation/ # Navigation configuration & linking
│ ├── services/ # API clients, data-fetching logic
│ ├── state/ # Global state (Redux, Zustand, etc.)
│ ├── hooks/ # Custom React hooks
│ ├── utils/ # Pure utility functions & constants
│ ├── types/ # TypeScript interfaces & enums
│ ├── config/ # Environment variables, feature flags
│ └── theme/ # Colors, typography, spacing tokens
├── tests/ # Integration & end-to-end tests
├── app.json
├── package.json
└── tsconfig.json

בואו נבחן את מטרתו של כל מנהל ומה שייך פנימה.

(FLT 3: 3) - ניתן לבנות בלוקים

(ה) יש מרכיבים שאינם קשורים למסך מסוים או לתכונות, כולל דוגמאות ל-FLT:4,5;5, FLT:6, FLT 7, FLT 7, FLT:8, FLT:9, ⁇ 9, ⁇ 10, הם צריכים להיות מלא: הם מקבלים תכונות והופכים את UI ללא ידע של לוגיקה עסקית של אפליקציה.

טעות נפוצה היא להשליך את כל החלקים האפשריים של UI לתוך תיקיה שטוחה (FLT:13), כפי שהספרייה גדלה, לשקול קיבוץ רכיבים הקשורים לדרגים משנה:

  • (ב) ,(ה) , ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
  • (FLT:15) - שדות אינפוט, צ'קוקס, כפתורי רדיו.
  • (FLT:16) - רכיבי הדמיה נתונים.

לכל רכיב צריך להיות קובץ מבחן משלו (למשל, FLT:17) ואולי סיפור סיפור על בדיקות רגרסיה חזותיות.

(ב) ◄ ⁇ ⁇ ⁇ ⁇

(המסכים הם המרכיבים שממפה ישירות לנתיבים בערימה הניווט שלך.כל מסך מורכב משילוב של רכיבים הניתנים להחלפה ורכיבים ספציפיים תכונה המחיה את FLT:0sideearFLT:1 תיקיית המסך (או קו משותף של משותף של רכיבי FLT:19) המסך עצמו צריך להיות דק: הוא מביא נתונים, עובר props למטה, ומנהל את פריסת המסך ברמה גבוהה יותר; במקום זאת, למנוע שירותי לוגיקה מורכבת;

(הופנה מהדף ויקרא י"ד) , ויקרא ויקרא יא"ד, אם יש לך הרבה מסכים, אתה יכול לקבץ אותם על ידי דומיינים:

  • (ב) ,"הללו" (בתרגום חופשי: "הבאת ס"צ)" (בתרגום חופשי: "הנחמה")
  • (FLT:24) - MainScreen, AnalyticsScreen, דוחות

(ב) « « « « « « LT:25 ; « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « « «

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

  • (ב) , ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
  • (ב) ,בשורה התחתונה (ב"ב)
  • (FLT:28) - אובייקט תצורה של קישורים עמוקים לניווט תגובה.
  • (FLT:29) - Aref to theניווט Tool for use Outside רכיבים (למשל, בשירותים).

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

(FLT:30) - API Calls & Business Logic

שירותים מעצימים את כל התקשורת עם מערכות חיצוניות: REST APIs, GraphQL, LocalStorage, דוחפים את הרישום הודעות, וכו 'שירות הוא בדרך כלל שיעור או קבוצה של פונקציות שלוקחות פרמטרים והבטחות החזרה.

  • (ב) , ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
  • (ב) , ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
  • (FLT:33) - מסלול, זיהוי משתמש.

שירותים לא צריכים לייבא תגובה או קוד UI, הם יכולים, עם זאת, להשתמש בפונקציות עוזרות של LT:34 וסוגים מ FLT:35 וזה הופך אותם לבחינה עם בדיקות יחידה טהור וקל ללעג במבחנים אינטגרציה.

לקבלת נתונים, קבוצות רבות מעדיפות כעת להשתמש ב- React Query או SWR, אשר לנהל צ'ינג ורקע לוכדים.במקרים אלה, ייתכן שתמקם את השאילתה בתוך FLT:36 אבל שיחות API הבסיסיות עדיין חיים ב-FLT:37.

(FLT:38) - ניהול המדינה

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

  • (ב) ,(FLT:39) - להגדיר את STore, מקטין שורש.
  • (ב) .
  • (ב) .
  • (ב) , (ב) , ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇

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

(בלטינית: Custom Hooks)

שכנוע לוגיקה של המדינה בתאים מותאמים אישית:

  • « « « « « « « « .
  • (FLT:45) (הופנה מהדף אם האפליקציה נמצאת ב-Foreground/ ⁇ )
  • (ב) .
  • ◄
  • (FLT:48) (קריאות שירות והמדינה)

הוקס, שמיוחד למסך יחיד, צריך לחיות יחד עם המסך הזה, לא בתיקיה העולמית (FLT:49).

(ב) « « « « « « « « « « « « « « « « « « « « « קונסטנטין»

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

  • ◄
  • ◄
  • (ב) .
  • (FLT:54) (API Base URL, ערכי זמן, מפתחי דגל תכונה)

שמור את הקבצים הקטנים והתכליתיים האלה.אל תמנעו מקבצי "כיור" המכילים כלי עזר לא קשורים.אם אתם מוצאים יותר מ קומץ עוזרים, ניתרו אותם לקבצים נפרדים.

(בלטינית: TypeScript Type Definition)

מרכזי ממשקי TypeScript שלך, הקלד כינויים, ו enums כאן. Common דוגמאות:

  • (FLT:56) - רשימות פרמטר לכל נווט.
  • (FLT:57) - משתמש, פרופיל משתמש, סוגי משתמשים.
  • (FLT:58) - מעטפה תגובה של API גנרית, סוגי דמיון.
  • (FLT:59) - סוגים ספציפיים של מותג.

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

(ב) ,60: סביבות ואמפ; דגלים

יישומים Native לעתים קרובות זקוקים לתצורה שונה לסביבה (פיתוח, עוקץ, ייצור) לשמור את ההיגיון הזה כאן, לעתים קרובות באמצעות מבנה FLT:61 או סביבת משתנים.

  • ◄ [26]
  • ◄ [15]
  • (FLT:64) - מפה של דגלים בוזים כדי לאפשר / בלתי ניתן לייחס תכונות התפתחותיות.

⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇

קובץ נושא היצוא קבוע עבור צבעים, טיפוגרפיה, צללים, ונקודות קצה.קבוצות רבות משתמשות בספריה כמו FLT:66 או FLT:67 אשר צורכות אסימוניות אלה.

  • ◄ .68
  • (ב) .69
  • ◄ .
  • (FLT:71) – אובייקט הנושא ברירת המחדל.

◄72 - משאבים סטטיים

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

(ב) אינטגרציה ואמפ; E2E Tests

בעוד שבדיקות יחידה צריכות לחיות ליד הקוד שהן בודקות (למשל, FLT:74), שילוב וקבצים של מבחן קצה מקצה לקצה שייכים כאן. השתמש ב- Detox או Appium עבור E2E, וליצור פרופילים במבחן עבור מסעות משתמשים שונים. שמור על נתוני מבחן ותיקון של מכפליים עבור יכולת התחדשות.

יישום המבנה בפועל

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

שלב ראשון: להכין את עץ ה-Folder

יצירת המבנה המנהלי באמצעות הטרמינל או ה-IDE לפרויקט חדש, השתמש ב-FLT:75 הראשון, ולאחר מכן מחק את ברירת המחדל FLT:76 ונבנה מחדש כנקודת כניסה שמייבאת ל-77:77 זה שומר על השורש מינימלי.

שלב 2: הגדר את הניווט מוקדם

(הופנה מהדף [[1924]]]] ו[[1924]]]]]] ו[[1924]]]]]] [[1924]]]]]] ו[[1924]]]]]] [[1924]]]]]]]]]]]] [[1924]]]]]]]], [[1924]]]]]]]]]]]]

שלב 3: ליצור את הנושא ואת ה Constants

לפני כתיבת כל רכיבים, לקבוע את אסימוני העיצוב שלך ב-FLT:80 וקבועים ב-FLT:81 (זה מבטיח שכל מפתח משתמש בערכים עקביים מיום אחד).

שלב 4: בנו אחד עבריין

בחר רכיב פשוט כמו FLT:82 ומקם אותו ב-FLT:83 [כתוב את קובץ הבדיקה שלו.] לייצא אותו ולהשתמש בו בתוך מסך בעל מקום.זה מאמת את העובדה כי צינור הבנייה שלך עובד עם מבנה התיקיה.

שלב 5: יצירת שכבת שירות

אם האפליקציה שלך מתקשרת עם API, צור קשר עם AFLT:84 (ב-FLT:85) אשר קובע את התצורה של ההרחבה:86 או FLT:87 עם כתובת בסיס ו-iOS.

שלב 6: הוספת ניהול המדינה

החליטו על כלי מדינה (Redux Toolkit, Zustand וכו ') והקימו אותו ב-FLT:89 Connect It to the app inFLT:90.

שלב 7: שינוי קוד ההגשמה

אם אתה נודד פרויקט קיים, להעביר קבצים אחד במאי בכל פעם, החל עם החלקים היציבים ביותר (theme, קבועים, שירותים) שימוש בכלים כמו FLT:91 ולשמור את הבדיקות שלך ירוק.עדיף לבלות שבוע מאשר לחיות עם בסיס קוד מסובך במשך חודשים.

שיקולים מתקדמים ליישומים גדולים

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

מודולים מבוססים (Feature Folders)

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

src/
 features/
 auth/
 components/
 screens/
 services/
 state/
 hooks/
 types/
 profile/
 components/
 screens/
 services/
 state/
 hooks/
 types/
 shared/
 components/
 utils/
 hooks/

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

מונורו עם Libraries משותף

אם אתה שומר על יישומים מרובים של React Native (מנהל, מנהל, לבן-label), לשקול מונורופו מנוהל עם Nx או טורבו. Place משותף רכיבים ילידים, ווים, ושירותים ב-FLT:94 הספרייה כי שני היישומים לצרוך.This ממנפיק את המבנה מודולרי על פני יישומים ואכיפת מקור יחיד של אמת עבור המערכת העיצובית שלך.

קוד פיצול & Lazy Loading

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

Best Practices for Long-Term Reliance

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

  • (ב) ויקרא י"ד: "ה', ב': ויקרא י' (ב) - "ה' (ב) ויקרא י"ד): "ה', ב'"ה', ב', ב', ב', אין צורך לייבא אף פעם מרכיב.
  • (ב) ,0) מבחנים לצד קוד FLT:1 - כל תיקיה מודול צריך להיות ההרחבה: 100 sub-folder או קובץ משותף של מבחן שירותי בידוד, קובצי מבחן עם FFL:101, ומסכים במבחן עם חנות לעג.
  • (FLT:0) שמור על תלות מפורשת ב- 1FLT (ה) - להימנע מהסתמכות על ספקים גלובליים חסרי ערך.אם מסך זקוק למדינה האתית, לעבור אותה באמצעות אביזרים או באמצעות ההקשר המתועד בבירור.
  • (ב) [15] ,Use TypeScript קפדני מצב פאס 1 (ההגדרה: 102) ב tsconfig.This תופס בעיות ללא בטיחות ומעודד הקלדה נאותה של גבולות מודול.
  • (FLT:0) לבדוק את בריאות המבנה של ה-IIFIRLT:1 ; כפי שתכונות מוסיפים, ייתכן שתבחין בתיקיות גדלות מדי זמן תקציב כדי לחלק תיקיה אחת של רכיב לתוך תת-פרקים או לחלץ תכונה חדשה.
  • (ב) ,0) ,הנחה את המוסכמות שלך (ב) , צור מבנה תיקיה, שם מוסכמות, ותקנות יבוא.

לקריאה נוספת, ה-UFLT:0.React Native Architect records.React Native Architecture Documents: .com מספק הדרכה על חוט, גשר, טורבוModules - בעוד לא ישירות על מבנה הפרויקט, הבנת הפלטפורמה הבסיסית מסייעת לקבל החלטות מודולריות חכמות יותר.

מסקנה

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