آموزش React Navigation 5

react navigation اخیرا نسخه جدید خود یعنی x.5 همراه با یک سری تغییرات منتشر کرده است.React navigation در اپلیکیشن های react native برای جابجایی و مدیریت screen های مختلف مورد استفاده قرار می گیرد.ما به راحتی می توانیم چندین صفحه را به اپلیکیشن با استفاده از react navigation اضافه کنیم.React Navigation روش نصب خود را تغییر داده است.ما باید یک سری تغییرات در فایل های پیش فرض Android’s ایجاد کنیم.در این مقاله ما به صورت کامل آخرین نسخه React Navigation رو مورد بررسی قرار می دهیم.

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 .

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

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

پاسخی بگذارید لغو پاسخ

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

آموزش کار با FlexBox در React Native

5 تا از Hook های کاربردی React Native که باید یاد بگیرید

آیا Expo برای ساخت اپلیکیشن های React Native مناسب است؟

در خانه بمانید و از این تخفیف لذت ببرید

هدیه ویژه نوروزی | تا 50 درصد تخفیف

چرا برنامه نویسان React Native را دوست دارند؟

پاسخی بگذارید لغو پاسخ