Skip to main content

Yêu Cầu Chỉnh Sửa: Liên Kết Mục Hạng Thành Viên Từ Màn Hình Tài Khoản Sang Tab Điểm

Ngày cập nhật: 08/07/2026
Loại: UI/UX Navigation Flow & Screen Redirection

Ảnh feedback:

1. Vấn Đề Hiện Tại​

Trên màn hình Tài khoản (Account Screen):

  • Người dùng có một mục hiển thị Hạng thành viên hiện tại của họ (ví dụ: Badge hiển thị hạng Silver/Gold trên Profile Card hoặc một mục menu "Hạng thành viên").
  • Tuy nhiên, khi nhấn vào mục này, hệ thống đang không điều hướng hoặc điều hướng sai màn hình (mở trang trắng/trang mock cũ). Điều này khiến người dùng không thể xem được chi tiết tiến trình thăng hạng, thời hạn giữ hạng hay lịch sử điểm của mình.

2. Yêu Cầu Chỉnh Sửa​

  • Cấu hình điều hướng (Navigation Link): Thiết lập sự kiện nhấn (onPress) cho mục Hạng thành viên trên màn hình Tài khoản để chuyển hướng người dùng tới đúng màn hình chi tiết hạng.
  • Màn hình đích: Màn hình đích phải là màn hình Điểm (Points Screen). Đây chính là tab thứ 3 (nút tròn nổi màu vàng có chữ G ở chính giữa thanh điều hướng Bottom Navigation Bar) như hiển thị trong Ảnh thực tế đính kèm.
  • Tính nhất quán: Khi chuyển sang tab Điểm, thanh bottom navigation bar phải tự động cập nhật trạng thái active sáng lên ở nút tròn vàng chữ G để người dùng biết mình đang ở đâu.

3. Gợi Ý Hướng Dẫn Kỹ Thuật (Navigation Routing)​

Tùy vào cấu trúc thư viện định tuyến của dự án (React Navigation hoặc Expo Router):

3.1 Sử dụng React Navigation (Stack/Tab Navigation)​

// Trong file ProfileScreen.tsx hoặc AccountScreen.tsx
import { useNavigation } from '@react-navigation/native';

const ProfileScreen = () => {
  const navigation = useNavigation();

  const handlePressMembership = () => {
    // Điều hướng sang Tab 'Điểm' (ví dụ tên route đã đăng ký là 'Points' hoặc 'PointTab')
    navigation.navigate('Points'); 
  };

  return (
    <TouchableOpacity style={styles.membershipBadge} onPress={handlePressMembership}>
      <Text style={styles.badgeText}>Hạng Silver</Text>
    </TouchableOpacity>
  );
};

3.2 Sử dụng Expo Router (File-based Routing)​

// Trong file app/(tabs)/profile.tsx
import { useRouter } from 'expo-router';

const ProfileScreen = () => {
  const router = useRouter();

  const handlePressMembership = () => {
    // Điều hướng sang route của tab Điểm
    router.push('/(tabs)/points'); 
  };

  return (
    <TouchableOpacity style={styles.membershipBadge} onPress={handlePressMembership}>
      <Text style={styles.badgeText}>Hạng Silver</Text>
    </TouchableOpacity>
  );
};

Checklist Kỹ Thuật​

  • Định vị component hoặc vùng hiển thị Hạng thành viên (Badge hạng thẻ/hàng menu) trong file màn hình Tài khoản.
  • Bọc vùng hiển thị này bằng component có thể tương tác (TouchableOpacity hoặc Pressable) và gắn hàm điều hướng.
  • Liên kết hành động onPress để chuyển hướng sang tab Điểm (Points / PointScreen).
  • Kiểm tra đảm bảo dữ liệu hạng thành viên, tiến trình xét hạng và chặng xét hạng trên màn hình Điểm được fetch mới nhất từ API, không dùng cache cũ bị lệch.
  • Test thực tế luồng nhấn trên cả giả lập/thiết bị thật Android và iOS để xác nhận việc chuyển tab mượt mà và hiển thị đúng trạng thái active ở bottom tab bar.