React Native-এ পেজ নেভিগেশন (React Navigation) ইমপ্লিমেন্ট করা

React Native-এ স্ক্রিন নেভিগেশনের জন্য React Navigation লাইব্রেরি ডিফ্যাক্টো স্ট্যান্ডার্ড। স্ট্যাক নেভিগেশন সবচেয়ে phổ unha।

প্রয়োজনীয় প্যাকেজ ইনস্টলেশন

# মূল প্যাকেজ
npm install @react-navigation/native @react-navigation/stack

# পিয়ার ডিপেন্ডেন্সি (Expo-এ বিল্ট-ইন থাকে)
npm install react-native-screens react-native-safe-area-context react-native-gesture-handler
# বা Expo-এ: npx expo install react-native-screens react-native-safe-area-context react-native-gesture-handler

ফোল্ডার স্ট্রাকচার

project/
├── App.js
└── pages/
    ├── HomePage.js
    └── AboutPage.js

১. HomePage.js

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

const HomeScreen = ({ navigation }) => (
  
     navigation.navigate('About', { name: 'About Page' })}
    />
  
);

export default HomeScreen;

২. AboutPage.js

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

const AboutPage = ({ route }) => (
  
    You have reached inside About Page!
    Params: {JSON.stringify(route.params)}
  
);

export default AboutPage;

৩. App.js - নেভিগেশন কনফিগারেশন

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

const Stack = createStackNavigator();

const App = () => {
  return (
    
      
        
        
      
    
  );
};

export default App;

কীভাবে কাজ করে

• NavigationContainer - রুট কন্টেইনার, পুরো অ্যাপে একবার।
• createStackNavigator() - স্ট্যাক নেভিগেটর ফ্যাক্টরি।
• Stack.Navigator - স্ক্রিনের স্ট্যাক ধারণ করে।
• Stack.Screen - প্রতিটি রুটের নাম এবং কম্পোনেন্ট ম্যাপ করে।
• navigation.navigate('RouteName', params) - নতুন স্ক্রিনে যাওয়া।
• navigation.goBack() - পिछের স্ক্রিনে ফিরে যাওয়া।

প্যারামিটার পাস ও রিসিভ

// পাস করা
navigation.navigate('About', { userId: 123, name: 'John' });

// রিসিভ করা (AboutPage-এ)
const AboutPage = ({ route }) => {
  const { userId, name } = route.params;
  return {name} (ID: {userId});
};

অন্যান্য নেভিগেটর টাইপ

• Tab Navigator: বটম ট্যাব bár (@react-navigation/bottom-tabs)।
• Drawer Navigator: সাইড মেনু (@react-navigation/drawer)।
• Nested Navigation: ট্যাবের ভিতরে স্ট্যাক ইত্যাদি।