การนำทาง (Navigation) ระหว่างหน้าจอใน React Native

ขณะทำงานกับแอป จำเป็นต้องสลับระหว่างหน้าจอ ซึ่งจัดการโดย React Navigation

การติดตั้งแพ็กเกจ

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

โครงสร้างโฟลเดอร์

สร้างโฟลเดอร์ pages/ และไฟล์ 2 ไฟล์: HomePage.js และ AboutPage.js

pages/HomePage.js

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

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

export default HomeScreen;

หน้า Home แสดงปุ่ม "Click Here" กดแล้วไปหน้า AboutPage

pages/AboutPage.js

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

const AboutPage = () => {
  return You have reached inside About Page!;
};

export default AboutPage;

App.js - เรียกใช้หน้าจอ

import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

นำเข้า NavigationContainer และ createStackNavigator:

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

const Stack = createStackNavigator();

เพิ่มหน้าจอใน Stack:

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Home" component={HomePage} options={{ title: 'From home page : Navigation' }} />
    <Stack.Screen name="About" component={AboutPage} />
  </Stack.Navigator>
</NavigationContainer>

โค้ดเต็มรูปแบบ 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 MyStack = () => {
  return (
    
      
        
        
      
    
  );
};

export default MyStack;

แนวคิดสำคัญ

• Stack.Navigator จัดการการเปลี่ยนหน้าจอ แบบ stack (หน้าใหม่ซ้อนบนหน้าเก่า)
• navigation.navigate('ScreenName') ใช้สำหรับนำทาง
• ส่งพารามิเตอร์ได้ผ่าน object ที่ 2 ของ navigate
• ปัจจุบัน React Navigation v6+ เป็นเวอร์ชันล่าสุด API อาจแตกต่างจาก v5