آموزش react navigation5

با تازگی نسخه 5 کتابخانه react navigation با کلی تغییر منتشر شد.اگر نمیدونید که react navigation چی هست باید خدمتتون عرض کنم که وظیفه این کتابخانه مدیریت صفحات مختلف شما در react native است .react navigation در نسخه جدید دچار تغییرات خیلی زیادی حتی در نحوه نصب شده که در این مقاله این موارد رو به صورت کامل بررسی می کنیم.

همچنین می تونید دوره آموزشی کار با react navigation 5 رو به صورت رایگان در سایت مشاهده کنید.

1. اولین گام باید آخرین نسخه این کتابخانه را نصب کنیم.برای اینکار دایرکتوری پروژه را در cmd باز می کنیم و دستور زیر را اجرا میکنیم.

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

اسکرین شات بعد از نصب

3. در گام بعدی باید کتابخانه  Stack Navigator رو نصب کنیم.دستور زیر را مجدد در دایرکتوری پروژه برای نصب این کتابخانه اجرا می کنیم.

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';

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

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';

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=&quotNavigate To Second Screen&quot />
</View>
);
}

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

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

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

const Stack = createStackNavigator();

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

function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name=&quotHome&quot component={HomeScreen} />
<Stack.Screen name=&quotSecond&quot 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: &quot100&quot,
},
});

12. کلمه کلیدی  export default  را برای کامپوننت App در انتهای این فایل قرار دهید تا به صورت خودکار تمامی view ها render شوند.

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=&quotNavigate To Second Screen&quot />
</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=&quotHome&quot component={HomeScreen} />
<Stack.Screen name=&quotSecond&quot component={SecondScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
text: {
textAlign: 'center',
margin: 12,
fontSize: 22,
fontWeight: &quot100&quot,
},
});
export default App;

اگر این مقاله براتون مفید بود،اون رو با دوستان و همکاراتون به اشتراک بزارید.

اگر قصد دارید مقالات تخصصی بیشتری در زمینه React Native مطالعه کنید پیشنهاد میکنم به بخش آموزش متنی سایت مراجعه کنید.همچنین اگر قصد دارید به عنوان یک برنامه نویسی حرفه ای React Native فعالیت کنید پیشنهاد میکنم دوره آموزش ساخت اپلیکیشن فروشگاهی مشابه digikala با react native رو مشاهده کنید.

[منبع]