Expo React Native Base Project

Base project đơn giản sử dụng Expo và React Native với React Navigation.

📁 Cấu trúc thư mục

expo_react-native/
├── src/
│   ├── screens/          # Các màn hình
│   │   ├── HomeScreen.js
│   │   ├── ProfileScreen.js
│   │   └── SettingsScreen.js
│   ├── components/       # Các component tái sử dụng
│   ├── navigation/       # Cấu hình navigation
│   │   └── AppNavigator.js
│   └── utils/           # Các hàm tiện ích
├── assets/              # Hình ảnh, fonts, etc.
├── App.js              # Entry point
└── package.json        # Dependencies

🚀 Cài đặt

Project đã được setup sẵn. Nếu cần cài lại dependencies:

npm install

▶️ Chạy app

Sử dụng Expo Go (Khuyến nghị cho testing nhanh)

1. Cài đặt Expo Go trên điện thoại:

   • iOS App Store
   • Android Play Store

2. Chạy lệnh:

npm start

hoặc

npx expo start

3. Quét QR code bằng:
   • iOS: Camera app
   • Android: Expo Go app

Chạy trên emulator

# Android
npm run android

# iOS (chỉ trên macOS)
npm run ios

Chạy trên web

npm run web

📦 Packages đã cài đặt

• expo: Framework chính
• react-native: Core React Native
• @react-navigation/native: Navigation library
• @react-navigation/bottom-tabs: Bottom tab navigation
• react-native-screens: Native screen components
• react-native-safe-area-context: Safe area handling

🎨 Tính năng có sẵn

• ✅ Bottom Tab Navigation với 3 màn hình (Home, Profile, Settings)
• ✅ Cấu trúc thư mục chuẩn
• ✅ Màn hình mẫu với styling đẹp
• ✅ Navigation setup sẵn sàng để mở rộng

📱 Màn hình

Home Screen

• Màn hình chính với thông tin về project
• Button navigate đến Profile

Profile Screen

• Màn hình profile với avatar, stats
• Layout đẹp sẵn để custom

Settings Screen

• Danh sách settings với các options
• Scrollable list với nhiều sections

🔧 Customize

Thêm màn hình mới

1. Tạo file mới trong src/screens/
2. Import vào src/navigation/AppNavigator.js
3. Thêm Tab.Screen mới

Thay đổi màu sắc

Màu chính được định nghĩa trong AppNavigator.js:

tabBarActiveTintColor: '#007AFF',  // Màu khi active
headerStyle: {
  backgroundColor: '#007AFF',       // Màu header
}

📝 Scripts có sẵn

npm start          # Khởi động Expo dev server
npm run android    # Chạy trên Android
npm run ios        # Chạy trên iOS
npm run web        # Chạy trên web browser

💡 Tips

• Sử dụng Expo Go để test nhanh trên thiết bị thật
• Press r trong terminal để reload app
• Press m để toggle menu
• Shake device để mở developer menu

🆘 Troubleshooting

Port đã được sử dụng

npx expo start --port 8082

Clear cache

npx expo start --clear

Reset project

rm -rf node_modules
npm install

---

Chúc bạn code vui vẻ! 🚀