Điều hướng (Navigation) giữa các màn hình trong React Native

React Navigation là thư viện routing/navigation tiêu chuẩn cho React Native. Hướng dẫn setup **Stack Navigator** (chuyển màn hình dạng chồng - push/pop).

1. Cài đặt packages

# Core
npm install @react-navigation/native @react-navigation/stack

# Dependencies (bắt buộc cho bare workflow)
npm install react-native-screens react-native-safe-area-context react-native-gesture-handler

# iOS only
npx pod-install

Lưu ý: Thêm import 'react-native-gesture-handler'; ở **dòng đầu tiên** của index.js / App.js.

2. Cấu trúc thư mục gợi ý

src/
  screens/
    HomeScreen.js
    AboutScreen.js
  navigation/
    AppNavigator.js
  App.js

3. Tạo màn hình (Screens)

src/screens/HomeScreen.js

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

const HomeScreen = ({ navigation }) => {
  return (
    
      Màn hình Home
       navigation.navigate('About', { user: 'Nguyen Van A' })}
        color="#007AFF"
      />
    
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 20 },
});

export default HomeScreen;

src/screens/AboutScreen.js

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

const AboutScreen = ({ route, navigation }) => {
  const { user } = route.params || {};

  return (
    
      Màn hình About
      Xin chào {user || 'Khách'}!
       navigation.goBack()} />
    
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 20 },
  title: { fontSize: 24, fontWeight: 'bold', marginBottom: 10 },
  text: { fontSize: 18, marginBottom: 20 },
});

export default AboutScreen;

4. Tạo Navigator

src/navigation/AppNavigator.js

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from '../screens/HomeScreen';
import AboutScreen from '../screens/AboutScreen';

const Stack = createStackNavigator();

export const AppNavigator = () => {
  return (
    
      
       ({ title: `About: ${route.params?.user || ''}` })}
      />
    
  );
};

5. Root App - Wrap NavigationContainer

App.js

import React from 'react';
import 'react-native-gesture-handler'; // QUAN TRỌNG: dòng đầu tiên
import { NavigationContainer } from '@react-navigation/native';
import { AppNavigator } from './src/navigation/AppNavigator';

export default function App() {
  return (
    
      
    
  );
}

6. Chạy ứng dụng

npx react-native run-android
# hoặc
npx react-native run-ios

Các API điều hướng cơ bản

Truyền dữ liệu giữa màn hình

// Gửi
navigation.navigate('Detail', { itemId: 123, title: 'Sản phẩm' });

// Nhận
const DetailScreen = ({ route }) => {
  const { itemId, title } = route.params;
  // Dùng itemId để fetch chi tiết...
};

Mẹo hay

• Dùng screenOptions trên Navigator để config header chung.
• Dùng options trên Screen để config riêng (title, headerShown, headerRight...).
• TypeScript: Define RootStackParamList để type-safe params.
• Deep linking: Cấu hình linking prop trên NavigationContainer.