آموزش 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 باز می کنیم و دستور زیر را اجرا میکنیم.

npm install @react-navigation/native

1	npm install @react-navigation/native

2. حالا باید کتابخانه های reanimated, gesture handler, react native screens, react native safe area و masked viewرو در پروژه خودمون نصب کنیم.پس مجدد دایرکتوری پروژه رو در Command Prompt باز میکنیم و دستور زیر را اجرا میکنیم.این کتابخانه ها برای استفاده React Navigation اجباری هستند.

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

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 رو در پروژه خودمون نصب کنیم.دستور زیر را مجدد در دایرکتوری پروژه برای نصب این کتابخانه اجرا می کنیم.

npm install @react-navigation/stack

1	npm install @react-navigation/stack

4. حالا پروژه شما آماده استفاده از React Navigation 5.x است.بخش بعدی استفاده از این کتابخانه و شروع کدنویسی است.بنابراین فایل App.js را باز کنید و react-native-gesture-handler را ایمپورت کنید.اگر react-native-gesture-handler را ایمپورت نکنیم در حالت debug به ما خطایی نشان نمی دهد ولی صد در صد در APK با error روبرو خواهید شد.

import 'react-native-gesture-handler';

1	import 'react-native-gesture-handler';

5. ایمپورت StyleSheet, Text, View و Button در App.js:

import * as React from 'react';
 
import { StyleSheet, Text, View, Button } from 'react-native';

import * as React from 'react';

import { StyleSheet, Text, View, Button } from 'react-native';

6. ایمپورت NavigationContainer و createStackNavigator از کتابخانه react navigation :

import { NavigationContainer } from '@react-navigation/native';
 
import { createStackNavigator } from '@react-navigation/stack';

import { NavigationContainer } from '@react-navigation/native';

import { createStackNavigator } from '@react-navigation/stack';

7. ایجاد یک تابع به نام HomeScreen با navigation prop.این تابع در واقع Home Screen ما خواهد بود.در آخرین نسخه React Navigation ساختار کدنویسی برنامه بهبود یافته است و ما راحت تر می توانیم View ها رو ایجاد کنیم:

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 HomeScreen({ navigation }) {

navigateToScreen=()=>{

navigation.navigate('Second');

}

return (

<Text style={styles.text}> Home Screen </Text>

</View>

);

}

8.ایجاد یک تابع دیگر به نام SecondScreen.این دومین screen ما خواهد بود.

function SecondScreen() {
  return (
    <View style={styles.MainContainer}>
 
      <Text style={styles.text}> Second Screen </Text>
 
    </View>
  );
}

function SecondScreen() {

return (

<Text style={styles.text}> Second Screen </Text>

</View>

);

}

9. استفاده از ()createStackNavigator

const Stack = createStackNavigator();

1	const Stack = createStackNavigator();

10.ایجاد یک تابع به نام App و قرار دادن Stack.Screen با نام screen ها و wrap کردن درون Stack.Navigator و Navigation Container .

اضافه کردن Sticky header به Flatlist در react native

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
 
        <Stack.Screen name="Home" component={HomeScreen} />
 
        <Stack.Screen name="Second" component={SecondScreen} />
 
      </Stack.Navigator>
    </NavigationContainer>
  );
}

function App() {

return (

<Stack.Navigator>

<Stack.Screen name="Home" component={HomeScreen} />

<Stack.Screen name="Second" component={SecondScreen} />

</Stack.Navigator>

</NavigationContainer>

);

}

11.ایجاد استایل

const styles = StyleSheet.create({
  MainContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
 
  text: {
    textAlign: 'center',
    margin: 12,
    fontSize: 22,
    fontWeight: "100",
  },
 
});

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 شوند.

export default App;

1	export default App;

13. کد کامل برنامه در فایل App.js

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;

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 (

<Text style={styles.text}> Home Screen </Text>

</View>

);

}

function SecondScreen() {

return (

<Text style={styles.text}> Second Screen </Text>

</View>

);

}

const Stack = createStackNavigator();

function App() {

return (

<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 دیدگاه

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

محمد حسن گفت:

آگوست 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 ب.ظ
  
  سلام به شما
  خیلی ممنون بابت کامنتتون و انرژی که به ما منتقل میکنید
  شاد باشید
  
  پاسخ

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

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

تفاوت توسعه برنامه های android و ios

آموزش آرایه در جاوا اسکریپت ( JavaScript)

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

استفاده از Mapbox در react native (ری اکت نیتیو)

4 دیدگاه

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