Stack Navigator: nó là gì, điều hướng ngăn xếp trong React Native

Stack Navigator là gì?

Stack Navigator — một trong những bộ điều hướng cơ bản của thư viện React Navigation triển khai mô hình ngăn xếp màn hình. Nó cung cấp điều hướng quen thuộc cho người dùng di động: mở màn hình mới đi kèm hoạt ảnh trượt sang phải và nút «Quay lại» hoặc cử chỉ vuốt đưa người dùng về màn hình trước đó. Stack Navigator hỗ trợ iOS và Android, sử dụng thành phần native của nền tảng để đạt hiệu suất tối đa.

React Navigation là thư viện điều hướng phổ biến nhất cho React Native, được cài đặt trong 85% dự án (theo dữ liệu npm, 2026). Stack Navigator là một phần lõi của nó và có sẵn ở hai triển khai: createNativeStackNavigator (native, được khuyến nghị) và createStackNavigator (JavaScript, cho hoạt ảnh tuỳ chỉnh phức tạp). Phiên bản native xuất hiện trong React Navigation v5 và trở thành tiêu chuẩn trong v6+.

Lợi thế chính của Stack Navigator — hành vi tự nhiên quen thuộc với người dùng iOS và Android. Trên iOS, ngăn xếp được thể hiện trực quan qua UINavigationController, trên Android — qua FragmentManager với hoạt ảnh trượt. Nhà phát triển không cần triển khai logic ngăn xếp thủ công — bộ điều hướng tự động quản lý trạng thái màn hình, ngăn xếp quay lại và hoạt ảnh.

Cách hoạt động của điều hướng ngăn xếp

Điều hướng ngăn xếp dựa trên nguyên lý LIFO (Last In, First Out). Khi người dùng mở một màn hình mới, bộ điều hướng đặt nó lên đỉnh ngăn xếp. Khi nhấn «Quay lại», màn hình trên cùng bị xoá và người dùng thấy màn hình trước đó. Ngăn xếp có thể chứa bất kỳ số lượng màn hình nào — giới hạn duy nhất là bộ nhớ thiết bị.

Mỗi màn hình trong ngăn xếp giữ nguyên trạng thái của nó. Khi quay lại màn hình trước, trạng thái của nó được khôi phục tự động. Điều này phân biệt ngăn xếp với các loại điều hướng khác (Tab, Drawer), nơi màn hình có thể được tạo lại. React Navigation quản lý trạng thái qua cơ chế ngữ cảnh điều hướng riêng của nó.

Cử chỉ vuốt để quay lại

Trên iOS, Stack Navigator hỗ trợ cử chỉ vuốt từ mép trái để quay lại — đây là hành vi tiêu chuẩn của iOS mà người dùng mong đợi. Trên Android, cử chỉ bị tắt theo mặc định nhưng có thể bật qua tuỳ chọn gestureEnabled. Trong Native Stack, cử chỉ hoạt động native mà không có độ trễ của luồng JavaScript.

Native Stack vs JS Stack

React Navigation cung cấp hai loại Stack Navigator: Native Stack (createNativeStackNavigator) và JS Stack (createStackNavigator). Sự khác biệt chính — nơi hoạt ảnh được thực thi. Native Stack sử dụng trình điều khiển hoạt ảnh native của iOS và Android, trong khi JS Stack chạy qua luồng JavaScript của React Native. Lựa chọn giữa chúng phụ thuộc vào yêu cầu về hiệu suất và tuỳ chỉnh.

Native Stack được khuyến nghị cho hầu hết các dự án. Nó cung cấp hoạt ảnh mượt mà 60 FPS mà không chặn luồng JS, hỗ trợ cử chỉ vuốt quay lại hệ thống trên iOS và sử dụng chuyển tiếp native — slide trên iOS, fade trên Android. Tuy nhiên, Native Stack bị giới hạn trong việc tuỳ chỉnh hoạt ảnh: chỉ có một tập hợp chuyển tiếp được xác định trước.

JS Stack cho phép kiểm soát hoàn toàn hoạt ảnh qua cardStyleInterpolator. Nhà phát triển có thể tạo bất kỳ hoạt ảnh nào: thu phóng, xoay, parallax, đường cong tuỳ chỉnh. Nhược điểm — hoạt ảnh chạy trong luồng JS, có thể gây rớt khung hình trên thiết bị yếu với chuyển tiếp phức tạp. Đối với 70% dự án, Native Stack là quá đủ.

// Native Stack — triển khai được khuyến nghị
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>
  );
}

Cài đặt và cấu hình Stack Navigator

Để bắt đầu với Stack Navigator, cần cài đặt React Navigation và các phụ thuộc của nó. Bộ tối thiểu bao gồm @react-navigation/native, @react-navigation/native-stack và react-native-screens. Sau khi cài đặt, ứng dụng được bọc trong NavigationContainer — một ngữ cảnh cung cấp trạng thái điều hướng cho tất cả các thành phần con.

# Cài đặt phụ thuộc React Navigation
npm install @react-navigation/native @react-navigation/native-stack
npm install react-native-screens react-native-safe-area-context

# Đối với iOS — cài đặt pod
cd ios && pod install && cd ..

Sau khi cài đặt, Stack.Navigator được tạo với các màn hình cụ thể được định nghĩa trong RootStackParamList. Mỗi màn hình được liên kết với một thành phần React qua prop component. Bộ điều hướng có thể là gốc hoặc được lồng bên trong một bộ điều hướng khác (Tab, Drawer). Để cấu hình, sử dụng screenOptions — chung cho tất cả màn hình hoặc riêng cho từng màn hình.

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: 'Trang chủ' }} />
        <Stack.Screen name="Details" component={DetailsScreen}
          options={({ route }) => ({ title: route.params.title })} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Tham số và tuỳ chỉnh Stack Navigator

Stack Navigator cung cấp nhiều tuỳ chọn để tuỳ chỉnh giao diện và hành vi. Các tham số chính được thiết lập qua screenOptions ở cấp Navigator hoặc options ở cấp Screen. Nhà phát triển có thể cấu hình tiêu đề, hoạt ảnh chuyển tiếp, cử chỉ vuốt, kiểu thẻ và làm tối nền. Tính linh hoạt của cài đặt cho phép điều chỉnh điều hướng theo hệ thống thiết kế của ứng dụng.

Hoạt ảnh tuỳ chỉnh qua cardStyleInterpolator

Đối với JS Stack, cardStyleInterpolator cho phép tạo hoạt ảnh chuyển tiếp tuỳ ý giữa các màn hình. Đây là công cụ mạnh mẽ để triển khai các hiệu ứng hình ảnh độc đáo: thu phóng, xoay, parallax, lật ngang. Hàm nhận các giá trị tiến trình hoạt ảnh hiện tại (current, next) và trả về kiểu cho các phần tử đang được tạo hoạt ảnh.

Kiểu điều hướng với TypeScript

Stack Navigator hỗ trợ kiểu đầy đủ qua TypeScript. Để làm điều này, RootStackParamList được định nghĩa — một kiểu đối tượng nơi khoá là tên màn hình và giá trị là kiểu tham số. Sau khi định kiểu, navigation.navigate và route.params nhận được tự động hoàn thành và kiểm tra kiểu. Điều này loại bỏ lỗi truyền tham số tại thời điểm biên dịch.

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

// Màn hình được định kiểu
type ProductScreenProps = NativeStackScreenProps<RootStackParamList, 'Product'>;

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

  return (
    <View>
      <Text>Sản phẩm {id} — {category}</Text>
      <Button title="Thêm vào giỏ"
        onPress={() => navigation.navigate('Checkout', {
          items: [{ id, quantity: 1 }],
          total: 99.99,
        })} />
    </View>
  );
}

Kịch bản nâng cao: cửa sổ modal và nhóm

Stack Navigator hỗ trợ nhóm màn hình và cửa sổ modal. Nhóm (Screen Group) cho phép áp dụng cài đặt chung cho nhiều màn hình mà không trùng lặp. Cửa sổ modal được triển khai qua stack presentation: 'modal' — màn hình mở từ dưới lên với nền tối đi, giống như modal hệ thống trên iOS. Tuỳ chọn này chỉ khả dụng trong Native Stack.

Đối với điều hướng phức tạp, Stack Navigator có thể được lồng bên trong Tab Navigator hoặc Drawer Navigator. Ví dụ, tab «Trang chủ» có ngăn xếp màn hình riêng và tab «Hồ sơ» có ngăn xếp riêng. Sự kết hợp các bộ điều hướng này là cách tiếp cận tiêu chuẩn cho ứng dụng sản xuất. Mỗi ngăn xếp được cách ly: ngăn xếp quay lại trong một tab không ảnh hưởng đến các tab khác.

// Ngăn xếp lồng trong 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>
  );
}

// Nhóm màn hình với tuỳ chọn dùng chung
<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>