آموزش React Navigation 5
react navigation اخیرا نسخه جدید خود یعنی x.5 همراه با یک سری تغییرات منتشر کرده است.React navigation در اپلیکیشن های react native برای جابجایی و مدیریت screen های مختلف مورد استفاده قرار می گیرد.ما به راحتی می توانیم چندین صفحه را به اپلیکیشن با استفاده از react navigation اضافه کنیم.React Navigation روش نصب خود را تغییر داده است.ما باید یک سری تغییرات در فایل های پیش فرض Android’s ایجاد کنیم.در این مقاله ما به صورت کامل آخرین نسخه React Navigation رو مورد بررسی قرار می دهیم.
همچنین میتونید دوره آموزش react navigation 5 رو به صورت رایگان مشاهده کنید.
1. اولین گام باید آخرین نسخه این کتابخانه را نصب کنیم.برای اینکار دایرکتوری پروژه را در cmd باز می کنیم و دستور زیر را اجرا میکنیم.
1 | npm install @react-navigation/native |
2. حالا باید کتابخانه های reanimated, gesture handler, react native screens, react native safe area و masked viewرو در پروژه خودمون نصب کنیم.پس مجدد دایرکتوری پروژه رو در Command Prompt باز میکنیم و دستور زیر را اجرا میکنیم.این کتابخانه ها برای استفاده React Navigation اجباری هستند.
1 | npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view |
3. در گام بعدی باید کتابخانه Stack Navigator رو در پروژه خودمون نصب کنیم.دستور زیر را مجدد در دایرکتوری پروژه برای نصب این کتابخانه اجرا می کنیم.
1 | npm install @react-navigation/stack |
4. حالا پروژه شما آماده استفاده از React Navigation 5.x است.بخش بعدی استفاده از این کتابخانه و شروع کدنویسی است.بنابراین فایل App.js را باز کنید و react-native-gesture-handler را ایمپورت کنید.اگر react-native-gesture-handler را ایمپورت نکنیم در حالت debug به ما خطایی نشان نمی دهد ولی صد در صد در APK با error روبرو خواهید شد.
1 | import 'react-native-gesture-handler'; |
5. ایمپورت StyleSheet, Text, View و Button در App.js:
1 2 3 | import * as React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; |
6. ایمپورت NavigationContainer و createStackNavigator از کتابخانه react navigation :
1 2 3 | import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; |
7. ایجاد یک تابع به نام HomeScreen با navigation prop.این تابع در واقع Home Screen ما خواهد بود.در آخرین نسخه React Navigation ساختار کدنویسی برنامه بهبود یافته است و ما راحت تر می توانیم View ها رو ایجاد کنیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function HomeScreen({ navigation }) { navigateToScreen=()=>{ navigation.navigate('Second'); } return ( <View style={styles.MainContainer}> <Text style={styles.text}> Home Screen </Text> <Button onPress={this.navigateToScreen} title="Navigate To Second Screen" /> </View> ); } |
8.ایجاد یک تابع دیگر به نام SecondScreen.این دومین screen ما خواهد بود.
1 2 3 4 5 6 7 8 9 | function SecondScreen() { return ( <View style={styles.MainContainer}> <Text style={styles.text}> Second Screen </Text> </View> ); } |
9. استفاده از ()createStackNavigator
1 | const Stack = createStackNavigator(); |
10.ایجاد یک تابع به نام App و قرار دادن Stack.Screen با نام screen ها و wrap کردن درون Stack.Navigator و Navigation Container .
1 2 3 4 5 6 7 8 9 10 11 12 13 | function App() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Second" component={SecondScreen} /> </Stack.Navigator> </NavigationContainer> ); } |
11.ایجاد استایل
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' }, text: { textAlign: 'center', margin: 12, fontSize: 22, fontWeight: "100", }, }); |
12. کلمه کلیدی export default را برای کامپوننت App در انتهای این فایل قرار دهید تا به صورت خودکار تمامی view ها render شوند.
1 | export default App; |
13. کد کامل برنامه در فایل App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | import 'react-native-gesture-handler'; import * as React from 'react'; import { StyleSheet, Text, View, Button } from 'react-native'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; function HomeScreen({ navigation }) { navigateToScreen=()=>{ navigation.navigate('Second'); } return ( <View style={styles.MainContainer}> <Text style={styles.text}> Home Screen </Text> <Button onPress={this.navigateToScreen} title="Navigate To Second Screen" /> </View> ); } function SecondScreen() { return ( <View style={styles.MainContainer}> <Text style={styles.text}> Second Screen </Text> </View> ); } const Stack = createStackNavigator(); function App() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Second" component={SecondScreen} /> </Stack.Navigator> </NavigationContainer> ); } const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' }, text: { textAlign: 'center', margin: 12, fontSize: 22, fontWeight: "100", }, }); export default App; |
برای آشنایی بیشتر و استفاده از کلیه تغییراتی که در react navigation 5 نسبت به نسخه های قبلی این پکیج به وجود آمده است می توانید به صورت رایگان در دوره React Navigation 5 به صورت رایگان شرکت کنید
4 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
سلام خسته نباشید من همین کدا که داخل app.jsنوشتید داخل یه کلاس دیگه میخوام بنویسم چجوری میتونیم اون کلاسو به app.jsمعرفی کنم و کد بدون اشکال اجرا بشه؟
سلام سلامت باشید.
به طور مثال شما یک کامپوننت به نام Hello در یک فایل دیگه ایجاد کردید و همه ی کد ها رو در این کامپوننت نوشتید.کافیه کامپوننت رو به صورت default
export بگیرید و در کامپوننت App ایمپورت کنید
و در قسمت return به شکل زیر عمل کنید
return(
)
واقعا سایت بی نظیری دارین من کم دیدم مثل شما…فقط امیدوارم همینطور با قدرت ادامه بدین
سلام به شما
خیلی ممنون بابت کامنتتون و انرژی که به ما منتقل میکنید
شاد باشید