כיצד לנווט בין מסכים באפליקציית React Native

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

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

לפני שאתה מתחיל

כדי לעקוב אחר הדרכה זו במחשב המקומי שלך, עליך להתקין את הדברים הבאים:

• Node.js v10 ומעלה
• Xcode אוֹ אנדרואיד סטודיו (הגדר להפעיל את האמולטור)
• תגובה מקורית CLI

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

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

הבנת כיצד פועל ניווט מחסנית

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

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

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

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

1. התקן את React Navigation עבור אפליקציות מקוריות

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

npm i @לְהָגִיב-ניווט/יָלִיד

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

npm i @לְהָגִיב-ניווט/יָלִיד-לַעֲרוֹם

כדי להתקין את השני, הפעל את זה:

npm אני מגיב-יָלִיד-מסכים

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

2. הגדר את המסך באפליקציית React Native שלך

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

צור תיקייה בשם מסכים בתוך ספריית השורש של היישום שלך. לאחר מכן, צור שני קבצים בשם HomeScreen.js ו- AboutScreen.js בתוך הספרייה מסכים.

מה להוסיף לקובץ HomeScreen.js שלך

פתח את הקובץ HomeScreen.js והתחל בייבוא ​​הדברים הבאים:

יְבוּא * כפי ש לְהָגִיב מ'לְהָגִיב';
יְבוּא { Text, View, StyleSheet, TouchableOpacity } מ'תגובה-יליד';
יְבוּא { useState } מ'לְהָגִיב'

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

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהמסך הבית({ניווט}) { 
לַחֲזוֹר ( 
<נוףסִגְנוֹן={styles.container}>
<טֶקסטסִגְנוֹן={styles.paragraph}> מסך הבית טֶקסט>
 כותרת="עבור למידע אודות"
 onPress={() => navigation.navigate('אודות המסך')} 
 /> 
נוף>
 );
}

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

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהמסך הבית({ניווט}) { 
const נתונים = { שם האתר: "הטכנולוגיה של ג'ון" }
לַחֲזוֹר ( 
<נוףסִגְנוֹן={styles.container}>
// הטקסט נכנס לכאן 
 כותרת="עבור למידע אודות"
 onPress={() => navigation.navigate('אודות המסך', נתונים)} 
 /> 
נוף>
 );
}

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

מה להוסיף לקובץ AboutScreen.js שלך

פתח את הקובץ AboutScreen.js והתחל בייבוא ​​התלות הבאים:

יְבוּא * כפי ש לְהָגִיב מ'לְהָגִיב';
יְבוּא { Text, View, StyleSheet, Button } מ'תגובה-יליד';

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

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאודות המסך({מַסלוּל}) { 
לתת dataObj = route.params
לַחֲזוֹר ( 
<נוףסִגְנוֹן={styles.container}>
<טֶקסטסִגְנוֹן={styles.paragraph}>
 זֶה הוא מסך אודות של {dataObj.websiteName} 
טֶקסט>
נוף>
 );
}

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

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

3. חיבור המסכים עם ה-Stack Navigator

בתוך App.js, התחל בייבוא ​​התלות הבאים:

יְבוּא * כפי ש לְהָגִיב מ'לְהָגִיב';
יְבוּא מסך הבית מ'./screens/Homescreen'
יְבוּא אודות המסך מ'./screens/AboutScreen'
יְבוּא { NavigationContainer } מ"@react-navigation/native"
יְבוּא { createNativeStackNavigator } מ"@react-navigation/native-stack"

בשורות שתיים ושלוש, ייבאנו את שני המסכים שיצרנו זה עתה. לאחר מכן, ייבאנו NavigationContainer

מ @react-navigation/native ו createNativeStackNavigator מ @react-navigation/native-stack כדי לעזור לנו לחבר את המסכים.

לאחר מכן, התקשר createNativeStackNavigator כדי לאחזר את המחסנית:

const Stack = createNativeStackNavigator()

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

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

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() { 
לַחֲזוֹר ( 
<NavigationContainer>
<לַעֲרוֹם. נווט>
<לַעֲרוֹם. מָסָךשֵׁם="מסך הבית"רְכִיב = {מסך הבית} />
<לַעֲרוֹם. מָסָךשֵׁם="אודות המסך"רְכִיב = {אודות המסך} />
לַעֲרוֹם. נווט>
NavigationContainer>
 );
}

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

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

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

למידע נוסף על React Native

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