כיצד לבנות מערכת ניווט ניידת עם ניווט React

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

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

התקנת ספריית הניווט React

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

כדי להתחיל להשתמש ב-React Navigation, התקן את הספרייה והתלות ההכרחיות שלה:

npm להתקין @react-navigation/native
npm להתקין react-native-screens react-native-safe-area-context

הגדרת ניווט

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

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

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

אתה תכתוב את הקוד כדי להגדיר את תבנית הניווט שבה אתה משתמש בתוך הפרויקט שלך App.js קוֹבֶץ.

יצירת ניווט בתוך App.js הקובץ הוא שיטה מומלצת מכמה סיבות:

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

מחסנית ניווט

ה-Stack Navigator הוא דפוס הניווט הפופולרי ביותר בספריית React Navigation. הוא משתמש במבנה נתונים מחסנית שבו כל מסך הוא רכיב שונה לחלוטין והוא מוערם על גבי הקודם.

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

לדוגמה:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא { NavigationContainer } מ'@react-navigation/native';
יְבוּא { createStackNavigator } מ'@react-navigation/stack';
// ייבא את רכיבי המסך שלך
יְבוּא מסך הבית מ'./screens/Homescreen';
יְבוּא מסך פרטים מ'./screens/DetailsScreen';
const Stack = createStackNavigator();
const אפליקציה = () => {
לַחֲזוֹר (


"בית" component={HomeScreen} />
"פרטים" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
};
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

בלוק הקוד שלמעלה יוצר רכיב Stack Navigator באמצעות createStackNavigator() מספריית הניווט.

בדוגמה זו, ל-Stack Navigator יש שני מסכים: בית ו פרטים.

כעת התקן את Stack Navigator:

npm להתקין @react-navigation/stack

בְּתוֹך מסך הבית, אתה יכול להשתמש ב ניווט חפץ לבדיקת ה-Stack Navigator:

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

 כותרת="נווט אל .."
 onPress={() => navigation.navigate("מסך פרטים")}
 />
 </View>
 );
};
יְצוּאבְּרִירַת מֶחדָל מסך הבית;
const styles = StyleSheet.create({});

שימו לב כיצד ה-Stack Navigator יוצר אוטומטית לחצן חץ כדי לטפל בניווט חזרה למסכים הקודמים.

ניווט כרטיסיות

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

כדי להתחיל, התקן את @react-navigation/bottom-tabs באמצעות ספרייה מנהל החבילות של NPM.

עם createBottomNavigator(), תוכל ליצור מופע של Tab Navigator כפי שעשית עם ה-Stack Navigator:

יְבוּא { createBottomTabNavigator } מ'@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator();

ולאחר מכן, הגדר את המסכים הרצויים ככרטיסיות בתוך הנווט ו NavigationContainer:

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
לַחֲזוֹר (


 שם="בית"
 component={מסך הבית}
 options={{ כותרת: "בית" }}
 />
 שם="פּרוֹפִיל"
 component={ProfileScreen}
 options={{ כותרת: "פּרוֹפִיל" }}
 />
 שם="פרטים"
 component={DetailScreen}
 options={{ כותרת: "פרטים" }}
 />
 </Tab.Navigator>
 </NavigationContainer>
 );
}

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

אתה יכול להשתמש ב tabBarPosition oאפשרות למקם את הנווט ב- חלק עליון, ימין, שמאלה, או תַחתִית (בְּרִירַת מֶחדָל).

ניווט מגירות

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

כדי להשתמש ב-Down Navigator, התקן אותו יחד עם להגיב-יליד-מטפל במחווה ו להגיב-יליד-מחדש:

npm להתקין @react-navigation/drawer
npm להתקין react-native-gesture-handler react-native-reanimated

תצטרך גם להגדיר reanimated בתוך שלך babel.config.js קוֹבֶץ:

מודול‎.exports = {
 הגדרות קבועות מראש: ["בבל-preset-expo"],
 תוספים: ["react-native-reanimated/plugin"],
};

להלן דוגמה כיצד להגדיר מגירה ניווט:

יְבוּא"הגיב-יליד-מטפל במחווה"; // ייבוא ​​זה חייב להיות בחלק העליון
יְבוּא { הצג, טקסט, לחצן } מ"תגובה-יליד";
יְבוּא { createDrawerNavigator } מ"@react-navigation/drawer";
יְבוּא { NavigationContainer } מ"@react-navigation/native";
const מגירה = createDrawerNavigator();
const DrawerContent = ({ ניווט }) => {
לַחֲזוֹר (
לְהַגמִישׁ: 1, alignItems: "מֶרְכָּז", JustifyContent: "מֶרְכָּז" }}>
גודל גופן: 24, משקל גופן: "נוֹעָז" }}>
 ברוכים הבאים למגירה
 </Text>

 זהו תוכן נוסף שתוכל להציג ב המגירה.
 </Text>
"סגור את המגירה" onPress={() => navigation.closeDrawer()} />
 </View>
 );
};
const אפליקציה = () => (

 initialRouteName="בית"
 drawerContent={(props) => <מגירה תוכן {... אביזרים} />}
 >
 {/* המסכים האחרים שלך כאן */}
 </Drawer.Navigator>
 </NavigationContainer>
);
יְצוּאבְּרִירַת מֶחדָל אפליקציה;

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

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

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

שקול את השיטות המומלצות הבאות כדי להפיק את המרב מהנווט במגירה:

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

העברת נתונים עם אביזרי ניווט

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

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

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

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא { הצג, טקסט, לחצן } מ'תגובה-יליד';
const מסך הבית = ({ ניווט }) => {
const handleItemPress = (פריט) => {
 navigation.navigate('מסך פרטים', { פריט });
 };
לַחֲזוֹר (

רשימה שֶׁל פריטים</Text>
"פריט 1" onPress={() => handleItemPress('נתוני פריט 1')} />
"פריט 2" onPress={() => handleItemPress('נתוני פריט 2')} />
 </View>
 );
};
יְצוּאבְּרִירַת מֶחדָל מסך הבית;

ה handleItemPress הפונקציה משתמשת ב- navigation.navigate שיטה לנווט אל מסך פרטים תוך העברת נתוני הפריט שנבחר כפרמטר בארגומנט השני.

כדי להיות מסוגל לגשת לנתונים שעברו בתוך מסך פרטים רכיב, תצטרך את ניווט לִתְמוֹך:

יְבוּא לְהָגִיב מ'לְהָגִיב';
יְבוּא { הצג, טקסט } מ'תגובה-יליד';
const מסך פרטים = ({ ניווט }) => {
const item = navigation.getParam('פריט', '');
לַחֲזוֹר (

מסך פרטים</Text>
{item}</Text>
 </View>
 );
};
יְצוּאבְּרִירַת מֶחדָל מסך פרטים;

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

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

ארגון קוד הניווט שלך

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

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