Stack Navigator: คืออะไร การนำทางแบบสแต็กใน React Native

Stack Navigator คืออะไร?

Stack Navigator — หนึ่งในเนวิเกเตอร์พื้นฐานของไลบรารี React Navigation ที่ใช้โมเดลสแต็กของหน้าจอ ให้การนำทางที่ผู้ใช้มือถือคุ้นเคย: การเปิดหน้าจอใหม่มาพร้อมกับแอนิเมชันเลื่อนไปทางขวา และปุ่ม «ย้อนกลับ» หรือท่าทางปัดจะนำผู้ใช้กลับไปยังหน้าจอก่อนหน้า Stack Navigator รองรับ iOS และ Android โดยใช้คอมโพเนนต์เนทีฟของแพลตฟอร์มเพื่อประสิทธิภาพสูงสุด

React Navigation เป็นไลบรารีการนำทางที่ได้รับความนิยมมากที่สุดสำหรับ React Native ติดตั้งใน 85% ของโปรเจกต์ (ตามข้อมูล npm, 2026) Stack Navigator เป็นส่วนหนึ่งของแกนกลางและมีให้ใช้งานในสองรูปแบบ: createNativeStackNavigator (เนทีฟ, แนะนำ) และ createStackNavigator (JavaScript, สำหรับแอนิเมชันแบบกำหนดเองที่ซับซ้อน) เวอร์ชันเนทีฟปรากฏใน React Navigation v5 และกลายเป็นมาตรฐานใน v6+

ข้อได้เปรียบหลักของ Stack Navigator — พฤติกรรมที่เป็นธรรมชาติซึ่งผู้ใช้ iOS และ Android คุ้นเคย บน iOS สแต็กจะแสดงผลด้วย UINavigationController บน Android — ด้วย FragmentManager พร้อมแอนิเมชันเลื่อน นักพัฒนาไม่จำเป็นต้องใช้ตรรกะสแต็กด้วยตนเอง — เนวิเกเตอร์จะจัดการสถานะหน้าจอ สแต็กย้อนกลับ และแอนิเมชันโดยอัตโนมัติ

การนำทางแบบสแต็กทำงานอย่างไร

การนำทางแบบสแต็ก ขึ้นอยู่กับหลักการ LIFO (Last In, First Out) เมื่อผู้ใช้เปิดหน้าจอใหม่ เนวิเกเตอร์จะวางไว้ที่ด้านบนของสแต็ก เมื่อกด «ย้อนกลับ» หน้าจอด้านบนจะถูกลบออกและผู้ใช้จะเห็นหน้าจอก่อนหน้า สแต็กสามารถบรรจุหน้าจอได้จำนวนเท่าใดก็ได้ — ข้อจำกัดเพียงอย่างเดียวคือหน่วยความจำของอุปกรณ์

แต่ละหน้าจอในสแต็กจะคงสถานะไว้ เมื่อกลับไปยังหน้าจอก่อนหน้า สถานะจะถูกกู้คืนโดยอัตโนมัติ สิ่งนี้ทำให้สแต็กแตกต่างจากการนำทางประเภทอื่น (Tab, Drawer) ซึ่งหน้าจออาจถูกสร้างขึ้นใหม่ React Navigation จัดการสถานะผ่านกลไกบริบทการนำทางของตัวเอง

ท่าทางปัดเพื่อกลับไป

บน iOS Stack Navigator รองรับท่าทางปัดจากขอบซ้ายเพื่อกลับไป — นี่คือพฤติกรรมมาตรฐานของ iOS ที่ผู้ใช้คาดหวัง บน Android ท่าทางจะถูกปิดใช้งานตามค่าเริ่มต้น แต่สามารถเปิดใช้งานได้ผ่านตัวเลือก gestureEnabled ใน Native Stack ท่าทางจะทำงานแบบเนทีฟโดยไม่มีความล่าช้าของเธรด JavaScript

Native Stack เทียบกับ JS Stack

React Navigation มี Stack Navigator สองประเภท: Native Stack (createNativeStackNavigator) และ JS Stack (createStackNavigator) ความแตกต่างหลัก — ตำแหน่งที่แอนิเมชันทำงาน Native Stack ใช้ไดรเวอร์แอนิเมชันเนทีฟของ iOS และ Android ในขณะที่ JS Stack ทำงานผ่านเธรด JavaScript ของ React Native การเลือกระหว่างทั้งสองขึ้นอยู่กับข้อกำหนดด้านประสิทธิภาพและการปรับแต่ง

Native Stack แนะนำสำหรับโปรเจกต์ส่วนใหญ่ ให้แอนิเมชัน 60 FPS ที่ราบรื่นโดยไม่บล็อกเธรด JS รองรับท่าทางปัดกลับของระบบบน iOS และใช้การเปลี่ยนภาพแบบเนทีฟ — slide บน iOS, fade บน Android อย่างไรก็ตาม Native Stack มีข้อจำกัดในการปรับแต่งแอนิเมชัน: มีเฉพาะชุดการเปลี่ยนภาพที่กำหนดไว้ล่วงหน้าเท่านั้น

JS Stack ให้การควบคุมแอนิเมชันอย่างสมบูรณ์ผ่าน cardStyleInterpolator นักพัฒนาสามารถสร้างแอนิเมชันใดก็ได้: การย่อ/ขยาย การหมุน พาราแลกซ์ เส้นโค้งที่กำหนดเอง ข้อเสีย — แอนิเมชันทำงานในเธรด JS ซึ่งอาจทำให้เฟรมดร็อปบนอุปกรณ์ที่อ่อนแอด้วยการเปลี่ยนภาพที่ซับซ้อน สำหรับ 70% ของโปรเจกต์ Native Stack ก็เพียงพอแล้ว

// Native Stack — การใช้งานที่แนะนำ
import { createNativeStackNavigator } from '@react-navigation/native-stack';

type RootStackParamList = {
  Home: undefined;
  Profile: { userId: string; name: string };
  Settings: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();

function AppNavigator() {
  return (
    <Stack.Navigator screenOptions={{ headerShown: true }}>
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Profile" component={ProfileScreen} />
      <Stack.Screen name="Settings" component={SettingsScreen} />
    </Stack.Navigator>
  );
}

การติดตั้งและกำหนดค่า Stack Navigator

ในการเริ่มต้นใช้งาน Stack Navigator จำเป็นต้องติดตั้ง React Navigation และ dependencies ของมัน ชุดขั้นต่ำประกอบด้วย @react-navigation/native, @react-navigation/native-stack และ react-native-screens หลังการติดตั้ง แอปพลิเคชันจะถูกห่อด้วย NavigationContainer — บริบทที่ให้สถานะการนำทางแก่คอมโพเนนต์ลูกทั้งหมด

# การติดตั้ง dependencies ของ React Navigation
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# สำหรับ iOS — การติดตั้ง pod
cd ios && pod install && cd ..

หลังการติดตั้ง Stack.Navigator จะถูกสร้างขึ้นพร้อมกับหน้าจอเฉพาะที่กำหนดใน RootStackParamList แต่ละหน้าจอเชื่อมโยงกับคอมโพเนนต์ React ผ่าน prop component เนวิเกเตอร์สามารถเป็นรูทหรือซ้อนอยู่ภายในเนวิเกเตอร์อื่น (Tab, Drawer) สำหรับการกำหนดค่า ใช้ screenOptions — ร่วมกันสำหรับทุกหน้าจอหรือแยกสำหรับแต่ละหน้าจอ

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

type RootStackParamList = {
  Home: undefined;
  Details: { itemId: number; title: string };
};

const Stack = createNativeStackNavigator<RootStackParamList>();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home"
        screenOptions={{
          headerStyle: { backgroundColor: '#6200ee' },
          headerTintColor: '#fff',
          gestureEnabled: true,
        }}>
        <Stack.Screen name="Home" component={HomeScreen}
          options={{ title: 'หน้าแรก' }} />
        <Stack.Screen name="Details" component={DetailsScreen}
          options={({ route }) => ({ title: route.params.title })} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

พารามิเตอร์และการปรับแต่ง Stack Navigator

Stack Navigator มีตัวเลือกมากมายสำหรับปรับแต่งลักษณะและพฤติกรรม พารามิเตอร์หลักถูกกำหนดผ่าน screenOptions ที่ระดับ Navigator หรือ options ที่ระดับ Screen นักพัฒนาสามารถกำหนดค่าส่วนหัว แอนิเมชันการเปลี่ยนภาพ ท่าทางปัด สไตล์การ์ด และการทำให้พื้นหลังมืดลง ความยืดหยุ่นของการตั้งค่าช่วยให้ปรับการนำทางให้เข้ากับระบบออกแบบของแอปพลิเคชัน

แอนิเมชันแบบกำหนดเองผ่าน cardStyleInterpolator

สำหรับ JS Stack cardStyleInterpolator อนุญาตให้สร้างแอนิเมชันการเปลี่ยนภาพตามต้องการระหว่างหน้าจอ เป็นเครื่องมือที่มีประสิทธิภาพสำหรับการใช้เอฟเฟกต์ภาพที่ไม่ซ้ำใคร: การย่อ/ขยาย การหมุน พาราแลกซ์ การพลิกแนวนอน ฟังก์ชันรับค่าความคืบหน้าแอนิเมชันปัจจุบัน (current, next) และส่งคืนสไตล์สำหรับองค์ประกอบที่กำลังเคลื่อนไหว

การกำหนดชนิดการนำทางด้วย TypeScript

Stack Navigator รองรับการกำหนดชนิดอย่างสมบูรณ์ผ่าน TypeScript โดยกำหนด RootStackParamList — ชนิดออบเจกต์ที่คีย์เป็นชื่อหน้าจอและค่าเป็นชนิดพารามิเตอร์ หลังจากกำหนดชนิดแล้ว navigation.navigate และ route.params จะได้รับการเติมข้อความอัตโนมัติและการตรวจสอบชนิด ซึ่งช่วยลดข้อผิดพลาดในการส่งพารามิเตอร์ในเวลาคอมไพล์

type RootStackParamList = {
  Home: undefined;
  Product: { id: string; category: string };
  Checkout: { items: CartItem[]; total: number };
};

// หน้าจอที่กำหนดชนิด
type ProductScreenProps = NativeStackScreenProps<RootStackParamList, 'Product'>;

function ProductScreen({ navigation, route }: ProductScreenProps) {
  const { id, category } = route.params;

  return (
    <View>
      <Text>สินค้า {id} — {category}</Text>id} — {category}</Text>
      <Button title="เพิ่มในตะกร้า"
        onPress={() => navigation.navigate('Checkout', {
          items: [{ id, quantity: 1 }],
          total: 99.99,
        })} />
    </View>
  );
}

สถานการณ์ขั้นสูง: หน้าต่างโมดอลและกลุ่ม

Stack Navigator รองรับการจัดกลุ่มหน้าจอและหน้าต่างโมดอล กลุ่ม (Screen Group) อนุญาตให้ใช้การตั้งค่าร่วมกันกับหลายหน้าจอโดยไม่ซ้ำกัน หน้าต่างโมดอลถูกใช้งานผ่าน stack presentation: 'modal' — หน้าจอเปิดจากด้านล่างพร้อมการทำให้พื้นหลังมืดลง เช่น โมดอลระบบบน iOS ตัวเลือกนี้ใช้ได้เฉพาะใน Native Stack

สำหรับการนำทางที่ซับซ้อน Stack Navigator สามารถซ้อนอยู่ภายใน Tab Navigator หรือ Drawer Navigator ตัวอย่างเช่น แท็บ «หน้าแรก» มีสแต็กหน้าจอของตัวเอง และแท็บ «โปรไฟล์» มีของตัวเอง การประกอบเนวิเกเตอร์นี้เป็นแนวทางมาตรฐานสำหรับแอปพลิเคชันในระดับโปรดักชัน แต่ละสแต็กถูกแยกออกจากกัน: สแต็กย้อนกลับภายในแท็บหนึ่งไม่มีผลต่อแท็บอื่น

// สแต็กที่ซ้อนใน Tab Navigator
const HomeStack = createNativeStackNavigator<HomeStackParamList>();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Feed" component={FeedScreen} />
      <HomeStack.Screen name="PostDetail" component={PostDetailScreen}
        options={{ presentation: 'modal' }} />
    </HomeStack.Navigator>
  );
}

// กลุ่มหน้าจอที่มีตัวเลือกร่วมกัน
<Stack.Navigator>
  <Stack.Group screenOptions={{ headerShown: true }}>
    <Stack.Screen name="Main" component={MainScreen} />
    <Stack.Screen name="About" component={AboutScreen} />
  </Stack.Group>
  <Stack.Screen name="Auth" component={AuthScreen}
    options={{ presentation: 'modal', headerShown: false }} />
</Stack.Navigator>