Khắc Phục Lỗi Màn Hình Trắng Expo-Router và Expo-SQLite trên Android: Hướng Dẫn Chi Tiết

Bạn đang gặp phải tình trạng ứng dụng Expo của mình chỉ hiển thị một màn hình trắng sau khi build cho Android, mặc dù mọi thứ đều hoạt động tốt trong quá trình phát triển? Lỗi này thường xảy ra khi sử dụng kết hợp expo-router và expo-sqlite, gây ra không ít khó khăn cho các nhà phát triển. Bài viết này sẽ cung cấp cho bạn một hướng dẫn toàn diện để xác định nguyên nhân và khắc phục triệt để vấn đề này, giúp bạn đưa ứng dụng của mình hoạt động trơn tru trên mọi thiết bị.

Các Nguyên Nhân Phổ Biến Gây Ra Màn Hình Trắng

Có nhiều yếu tố có thể dẫn đến lỗi màn hình trắng khi sử dụng expo-router và expo-sqlite. Dưới đây là một số nguyên nhân phổ biến nhất mà bạn nên kiểm tra:

• Vấn đề về cấu hình metro.config.js: Cấu hình sai có thể dẫn đến việc các assets và modules không được bundle đúng cách.
• Lỗi trong tsconfig.json: Các đường dẫn (paths) không được cấu hình chính xác có thể gây ra lỗi khi import module.
• Phiên bản expo-sqlite không tương thích: Sử dụng phiên bản cũ hoặc không tương thích với phiên bản Expo hiện tại có thể gây ra lỗi.
• Lỗi liên quan đến drizzle-studio-expo: Nếu bạn đang sử dụng drizzle studio, việc cấu hình sai database có thể gây ra lỗi trắng màn hình.
• Các vấn đề về New Architecture: Việc bật New Architecture có thể gây ra các vấn đề không tương thích nếu chưa được cấu hình đúng cách.

Các Bước Khắc Phục Lỗi Màn Hình Trắng

Sau khi đã xác định được các nguyên nhân tiềm ẩn, hãy cùng xem xét các bước cụ thể để khắc phục lỗi màn hình trắng:

1. Kiểm Tra Cấu Hình metro.config.js

Đảm bảo rằng file metro.config.js của bạn đã được cấu hình đúng cách để hỗ trợ aliasing (nếu bạn sử dụng). Kiểm tra xem các đường dẫn đã được định nghĩa chính xác chưa. Ví dụ:

    
      module.exports = {
        resolver: {
          extraNodeModules: {
            '@': __dirname,
          },
        },
      };
    
  

2. Xác Minh Cấu Hình tsconfig.json

Kiểm tra file tsconfig.json để đảm bảo rằng các đường dẫn (paths) đã được khai báo chính xác. Điều này giúp TypeScript hiểu rõ cấu trúc thư mục của dự án. Ví dụ:

    
      {
        "compilerOptions": {
          "baseUrl": ".",
          "paths": {
            "@/*": ["./*"]
          }
        }
      }
    
  

3. Cập Nhật Phiên Bản expo-sqlite

Sử dụng phiên bản mới nhất của expo-sqlite có thể giải quyết các vấn đề tương thích. Hãy cập nhật bằng lệnh sau:

    
      npx expo install expo-sqlite
    
  

4. Kiểm Tra Cấu Hình Drizzle Studio (Nếu Sử Dụng)

Nếu bạn đang sử dụng drizzle-studio-expo, hãy đảm bảo rằng bạn đang truyền trực tiếp đối tượng SQLite database vào useDrizzleStudio, thay vì một đối tượng đã được "drizzle" hoá. Ví dụ:

    
      import * as SQLite from "expo-sqlite";
      import { useDrizzleStudio } from "expo-drizzle-studio-plugin";

      const db = SQLite.openDatabaseSync("mydb.db");

      export default function App() {
          useDrizzleStudio(db);
          // ...
      }
    
  

Thay vì:

    
      const expoSqlite = SQLite.openDatabaseSync("mydb.db");
      const db = drizzle(expoSqlite, { schema: schema.default });

      export default function App() {
          useDrizzleStudio(db); // SAI!
          // ...
      }
    
  

5. Cấu Hình New Architecture (Nếu Bật)

Nếu bạn đã bật New Architecture, hãy đảm bảo rằng bạn đã cập nhật lên phiên bản Expo SDK 52 trở lên và đặt newArchEnabled=true trong file app.json của bạn:

    
      {
        "expo": {
          // ...
          "experiments": {
            "newArchEnabled": true
          }
        }
      }
    
  

6. Xóa Cache và Build Lại

Sau khi thực hiện các thay đổi cấu hình, hãy xóa cache và build lại ứng dụng để đảm bảo các thay đổi được áp dụng:

    
      expo start --clear
      eas build -p android --profile development
    
  

7. Thử nghiệm trên Emulator/Thiết Bị Khác

Đôi khi lỗi có thể liên quan đến emulator hoặc thiết bị cụ thể. Thử nghiệm trên các thiết bị hoặc emulator khác nhau để xác định xem vấn đề có phải do môi trường hay không.

Kết Luận

Lỗi màn hình trắng khi sử dụng expo-router và expo-sqlite trên Android có thể do nhiều nguyên nhân khác nhau. Bằng cách kiểm tra kỹ lưỡng cấu hình, cập nhật các phiên bản thư viện và làm theo các bước khắc phục được trình bày trong bài viết này, bạn có thể nhanh chóng xác định và giải quyết vấn đề, giúp ứng dụng của mình hoạt động ổn định trên mọi nền tảng. Chúc bạn thành công!