جستجو برای:
  • صفحه اصلی
  • دوره ها
    • راهنمای یادگیری
  • بلاگ
  • تالار گفتمان
  • کانال تلگرام
  • درباره ما
  • تماس با ما
آموزش جاوا اسکریپت(javascript)-کتابخانه ها و فریمورک ها
  • صفحه اصلی
  • دوره ها
    • راهنمای یادگیری
  • بلاگ
  • تالار گفتمان
  • کانال تلگرام
0

ورود و ثبت نام

وبلاگ

آموزش جاوا اسکریپت(javascript)-کتابخانه ها و فریمورک ها > بلاگ > React Native > آموزش React Navigation 5

آموزش React Navigation 5

آموزش react navigation

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 به صورت رایگان شرکت کنید 

اشتراک گذاری:
برچسب ها: آموزش react nativeآموزش فارسی react nativeیادگیری react native

مطالب زیر را حتما مطالعه کنید

آموزش کار با sqllite در react native

آموزش کار با پایگاه داده sqllite در react native

کار با API در React Native

نحوه استفاده از API در React Native

black friday

طرح تخفیف ویژه Black Friday

handling-keyboard-in-react-native

مدیریت Keyboard در React Native

pressable component react native

آموزش کار با کامپوننت Pressable در React Native

react native

پاسخ سوالات شما در مورد React Native

قدیمی تر آموزش react - کار با useState Hook
جدیدتر چگونه موقعیت مکانی کاربر را با جاوا اسکریپت تشخیص دهیم؟

4 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • محمد حسن گفت:
    آگوست 16, 2020 در 8:02 ق.ظ

    سلام خسته نباشید من همین کدا که داخل app.jsنوشتید داخل یه کلاس دیگه میخوام بنویسم چجوری میتونیم اون کلاسو به app.jsمعرفی کنم و کد بدون اشکال اجرا بشه؟

    پاسخ
    • مهدی گفت:
      آگوست 16, 2020 در 8:20 ق.ظ

      سلام سلامت باشید.
      به طور مثال شما یک کامپوننت به نام Hello در یک فایل دیگه ایجاد کردید و همه ی کد ها رو در این کامپوننت نوشتید.کافیه کامپوننت رو به صورت default
      export بگیرید و در کامپوننت App ایمپورت کنید
      و در قسمت return به شکل زیر عمل کنید
      return(

      )

      پاسخ
  • علی علی بیگی گفت:
    ژوئن 1, 2020 در 5:27 ب.ظ

    واقعا سایت بی نظیری دارین من کم دیدم مثل شما…فقط امیدوارم همینطور با قدرت ادامه بدین

    پاسخ
    • علیرضا گفت:
      ژوئن 1, 2020 در 6:13 ب.ظ

      سلام به شما
      خیلی ممنون بابت کامنتتون و انرژی که به ما منتقل میکنید
      شاد باشید

      پاسخ

دیدگاهتان را بنویسید لغو پاسخ

جستجو
جستجو برای:
دسته‌ها
  • Material UI
  • NodeJS
  • React
  • React Native
  • Vue Js
  • آموزش متنی
  • استارت آپ و آموزش
  • برنامه نویسی
  • جاوااسکریپت
  • گپ و گفت
ارتباط با ما
  • 09150274110
  • contact@reactapp.ir
دسترسی سریع
  • بلاگ
  • تله فیلم آموزشی
  • آموزش متنی
  • قوانین

تیم reactapp تمام تلاش خودش رو انجام میده تا محتوایی با کیفیت و به روز رو در اختیار علاقه مندان به حوزه جاوااسکریپت قرار بده. چیدمان تمامی آموزش های ویدئویی و مقالات به نحوی هست که شمارو به سمت بازار کار سوق بده تا هر چه سریع تر به عنوان یک نیرو فنی در بازار کار مشغول به فعالیت شده و به درآمد زایی برسید.

کلیه حقوق این سایت محفوظ و متعلق به reactapp.ir میباشد.

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت