Navigation giữa các màn hình trong React Native cho người mới

Một app mobile thật hiếm khi chỉ có một màn hình. Bạn sẽ có màn hình Home, Detail, Profile, Settings, Login, Register. Vì vậy sau khi biết dựng UI, danh sách và form, bước tiếp theo là học navigation.

Trong hệ sinh thái React Native, thư viện phổ biến nhất cho navigation là React Navigation. Nó cung cấp các kiểu điều hướng quen thuộc như stack, tab và drawer.

Screen là gì?

Screen là một component đại diện cho một màn hình đầy đủ trong app. Ví dụ HomeScreen, ArticleDetailScreen, ProfileScreen. Navigation giúp bạn chuyển từ screen này sang screen khác.

Stack navigation

Stack giống một chồng màn hình. Khi bạn mở detail từ danh sách, detail được đặt lên trên Home. Khi bấm back, detail được lấy ra và bạn quay lại Home.

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

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="ArticleDetail" component={ArticleDetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Đây là cấu trúc tối giản. App thật có thể tách navigator ra file riêng để dễ quản lý.

Chuyển màn hình với navigate

function HomeScreen({ navigation }) {
  return (
    <Button
      title="Xem bài viết"
      onPress={() => navigation.navigate('ArticleDetail')}
    />
  );
}

navigation.navigate đưa người dùng sang screen có tên tương ứng.

Truyền params sang màn hình khác

Trong app blog, khi bấm vào một bài viết, màn hình detail cần biết bài nào được chọn. Bạn có thể truyền articleId qua params.

navigation.navigate('ArticleDetail', {
  articleId: article.id,
});

Ở màn hình detail, đọc params từ route.

function ArticleDetailScreen({ route }) {
  const { articleId } = route.params;
  return <Text>Article ID: {articleId}</Text>;
}

Tab navigation dùng khi nào?

Tab phù hợp cho các phần chính của app mà người dùng chuyển qua lại thường xuyên, như Home, Search, Saved, Profile. Stack phù hợp cho luồng đi sâu, như list → detail → edit.

Nhiều app kết hợp cả hai: bên ngoài là tab, bên trong mỗi tab có stack riêng. Với người mới, hãy học stack trước, sau đó học tab.

Lỗi thường gặp

Lỗi đầu tiên là đặt tên screen không nhất quán. Lỗi thứ hai là truyền quá nhiều dữ liệu qua params thay vì chỉ truyền ID rồi fetch/lookup dữ liệu. Lỗi thứ ba là để toàn bộ navigation trong một file khổng lồ. Lỗi thứ tư là chưa nghĩ rõ screen nào thuộc stack, screen nào thuộc tab.

Kết luận

Navigation biến các màn hình rời rạc thành một app có luồng sử dụng thật. Hãy bắt đầu với stack, hiểu navigate, route.params và nút back. Khi đã quen, bạn có thể thêm tab, auth flow và nested navigator.

Nguồn tham khảo: React Navigation: Getting Started, Hello React Navigation, Passing Parameters.