ניתוב מקורי שדמיין מחדש עם נתב Expo

ניתוב מבוסס קבצים הוא טכניקת פיתוח אינטרנט נפוצה הממפה נתיב URL לקובץ ספציפי בספריית פרויקט. מערכת זו נמנעת מתצורות הניתוב המורכבות הכרוכות בבניית מערכות ניווט.

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

ניווט מחודש עם נתב Expo

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

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

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

התקנה והגדרה של נתב Expo

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

שלב 1: התקן את נתב Expo

השתמש בפקודה מסוף זו כדי להפעיל את מתקין ה-expo-router:

npx expo להתקין נתב expo

תצטרך גם לוודא שהתקנת את התלות של עמיתים אלה:

• react-native-safe-area-context
• להגיב-מסכים ילידים
• קישור אקספו
• expo-status-bar
• להגיב-יליד-מטפל במחווה

אם חסרים, תוכל להתקין אותם על ידי הפעלת:

התקנת npx expo 

שלב 2: עדכן את נקודת הכניסה

ליצור חדש index.js קובץ כדי להחליף את הקיים שלך App.js נקודת כניסה וקבע את index.js כנקודת הכניסה של האפליקציה בפנים app.json:

// הגדר את index.js כנקודת כניסה
{
"רָאשִׁי": "index.js"
}
// ייבא את הדברים הבאים בתוך index.js
יְבוּא"ראוטר/כניסה לתערוכת";

נתב Expo משתמש ב-a קישור עמוק סכימה כדי לקבוע איזה מסך או תוכן לפתוח בעת ניתוב.

הגדר סכימת קישור עמוק לאפליקציה שלך על ידי הוספת א תָכְנִית רכוש ל app.json:

{
"תערוכה": {
"תָכְנִית": "האפליקציה שלי"
 }
}

שלב 4: תצורה סופית

השלב האחרון הוא להגדיר את חבילת המטרו של אפליקציית Expo שלך ולהגדיר את Babel לתמוך ב-Expo Router באפליקציה שלך.

בְּתוֹך babel.config.js שנה את הקוד הקיים כך שיראה כך:

מודול.exports = פוּנקצִיָה (API) {
 api.cache(נָכוֹן);
לַחֲזוֹר {
 הגדרות קבועות מראש: ["בבל-preset-expo"],
 תוספים: [
לִדרוֹשׁ.לִפְתוֹר("ראוטר אקספו/באבל"),
/* */
 ],
 };
};

כעת בנה מחדש והתחל את האפליקציה שלך על ידי הפעלת:

npx expo --clear

בניית המסלולים של האפליקציה שלך עם נתב Expo

אתה יכול להתחיל להגדיר זרימת ניווט בתוך אפליקציה תיקייה. ה index.js הקובץ הוא נקודת ההתחלה שלך. Expo Router מוסיף את הנתיב של כל קובץ שאתה יוצר בתוכו אפליקציה למערכת המסלולים של האפליקציה עם קישורים עמוקים של כתובת URL שיתאימו לכל עמוד.

לדוגמה, צור א SecondScreen.js קובץ בתוך אפליקציה ספרייה וייצא רכיב ברירת מחדל:

יְבוּא { StyleSheet, Text, View } מ"תגובה-יליד";
יְבוּא לְהָגִיב מ"לְהָגִיב";
const מסך שני = () => {
לַחֲזוֹר (


מסך שני</Text>
 </View>
 </View>
 );
};
יְצוּאבְּרִירַת מֶחדָל מסך שני;
const styles = StyleSheet.create({});

אתה יכול לנווט למסך זה מ index.js עם ה useRouter() שיטה:

יְבוּא { useRouter } מ"ראוטר אקספו";
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהעמוד() {
const navigation = useRouter();
לַחֲזוֹר (

שלום עולם</Text>
זה העמוד הראשון שֶׁל האפליקציה שלך.</Text>
 כותרת="נווט למסך שני"
 onPress={() => {
 navigation.push("/מסך שני");
 }}
 />
 </View>
 );
}

כאן אתה מקצה את הנתב לניווט ומשתמש בו בתוך האלמנט Button על ידי קריאה navigation.push("/second"). הארגומנט בתוך push הוא נתיב הקובץ של המסך שאליו ברצונך לנווט.

בְּתוֹך מסך שני אתה יכול גם לנווט למסך האינדקס כך:

יְבוּא { קישור } מ"ראוטר אקספו";
const מסך שני = () => {
לַחֲזוֹר (


מסך שני</Text>
"/" כילד>

נווט אל index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

רכיב הקישור לוקח מאפיין href כדי לציין את הנתיב. האפליקציה הפנימית, ה "/" נתיב מתאים לקובץ הערך (index.js). האביזר השני הוא asChild. אבזר זה מאפשר לך לרנדר רכיב צאצא ראשון עם כל האביזרים שצוינו במקום רכיב ברירת המחדל של Link. אתה יכול להשתמש בזה כדי להתאים אישית את המראה של רכיב הקישור או ליישם לוגיקת ניתוב מותאמת אישית.

הגדרת מסלולים דינמיים

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

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

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

// app/routes/BlogPost.js
יְבוּא לְהָגִיב מ"לְהָגִיב";
יְבוּא { useRouter } מ"ראוטר אקספו";
const BlogPost = ({ מסלול }) => {
const { postId } = route.params;
לַחֲזוֹר (

מציג פוסט בבלוג עם מזהה: {postId}</Text>
 </View>
 );
};
יְצוּאבְּרִירַת מֶחדָל פוסט בבלוג;

בדוגמה זו, אתה מגדיר רכיב מסלול דינמי בשם פוסט בבלוג. ה route.params object מאפשר לך לגשת לערכי הפרמטרים שהועברו למסלול. במקרה זה, אתה ניגש ל-a postId פרמטר כדי להציג את הפוסט המתאים בבלוג.

יצירת מסלולים דינמיים

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

הנה דוגמה:

// app/components/BlogList.js
יְבוּא לְהָגִיב מ"לְהָגִיב";
יְבוּא { useNavigation } מ"ראוטר אקספו";
const BlogList = ({ פוסטים של בלוג }) => {
const navigation = useNavigation();
const navigateToBlogPost = (postId) => {
 navigation.navigate("פוסט בבלוג", { postId });
 };
לַחֲזוֹר (

 {blogPosts.map((הודעה) => (
 key={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
יְצוּאבְּרִירַת מֶחדָל BlogList;

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

טיפול בנתיבים דינמיים

אתה יכול להאזין לאירועי ניווט ספציפיים למסלול דינמי באמצעות ה useFocusEffect וו.

לדוגמה:

// app/routes/BlogPost.js
יְבוּא לְהָגִיב מ"לְהָגִיב";
יְבוּא { מסלול, useFocusEffect } מ"ראוטר אקספו";
const BlogPost = ({ מסלול }) => {
const { postId } = route.params;
 useFocusEffect(() => {
// אחזר נתוני פוסטים בבלוג על סמך postId
// בצע כל פעולות נחוצות אחרות במיקוד
 });
לַחֲזוֹר (

מציג פוסט בבלוג עם מזהה: {postId}</Text>
 </View>
 );
};
יְצוּאבְּרִירַת מֶחדָל פוסט בבלוג;

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

ניווט עם מסלולים דינמיים

כדי לנווט למסלול דינמי, אתה יכול להשתמש בשיטות הניווט שמספק Expo Router.

לדוגמה, כדי לנווט אל פוסט בבלוג רכיב עם ספציפי postId, אתה יכול להשתמש ב navigation.navigate שיטה:

// app/components/BlogList.js
יְבוּא לְהָגִיב מ"לְהָגִיב";
יְבוּא { useNavigation } מ"ראוטר אקספו";
const BlogList = ({ פוסטים של בלוג }) => {
const navigation = useNavigation();
const navigateToBlogPost = (postId) => {
 navigation.navigate("פוסט בבלוג", { postId });
 };
לַחֲזוֹר (

 {blogPosts.map((הודעה) => (
 key={post.id}
 onPress={() => navigateToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
יְצוּאבְּרִירַת מֶחדָל BlogList;

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

נתב Expo עוזר לך לבנות את האפליקציות המקוריות שלך

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

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