Hướng dẫn cài đặt Navigation trong React Native (phần 1)

16:25 22/02/2024

Navigation là khái niệm quan trọng khi bắt đầu học lập trình React native. Bài viết này sẽ giúp các Lập trình viên làm quen với cách cài đặt nevigation trong React Native.

Trước khi sử dụng Navigation hãy đảm bảo rằng dự án đang sử dụng các phiên bản tối tiểu mà RN khuyến cáo như sau : 

Minimum requirements

react-native >= 0.63.0

expo >= 41 (if you use Expo)

typescript >= 4.1.0 (if you use TypeScript)

CÀI ĐẶT : 

Để bắt đầu cài đặt Navigation trên dự án bật chương trình Terminal (MacOS) hoặc CMD (Windows) chạy với quyền admin để đảm bảo thư viện được lưu đầy đủ không lỗi . 

MacOS : thêm sudo ở phía trước câu lệnh 

Windows : tìm CMD ở Start , bấm chuột phải chọn Run as Admin 

Bước 1 : Gõ câu lệnh npm install @react-navigation/native

Bước 2 : Nhập tiếp câu lệnh  npm install react-native-screens react-native-safe-area-context

Bước 3 : Viết lại file App với nội dung như sau :

Thẻ NavigationContainer sẽ là thẻ chứa các component thể hiện màn hình khác trong dự án 

Bổ sung 2 file thể hiện màn hình Home, Detail sau đó khai báo trong App ta được:

Bước 4 : Lựa chọn Navigator cho dự án , RN hỗ trợ 6 loại Navigator khác nhau

Trong bài viết này chúng ta sẽ cùng cài đặt Drawer cho dự án 

Cài đặt thư viện Drawer : npm install @react-navigation/drawer

Cài tiếp thư viện nhận sự kiện vuốt và thực thi animation cho menu Drawer  : npm install react-native-gesture-handler react-native-reanimated

Cuối cùng , bổ sung câu lệnh ở dòng trên cùng trong file index.js 

import ‘react-native-gesture-handler’;

Cập nhật lại file App với nội dung như sau 

Trong file app khai báo 2 màn hình Home và Detail có thông tin lần lượt:

Chạy thử chương trình và sửa các lỗi phát sinh nếu có:

Lỗi Failed to create a worklet. Lỗi rất phổ biến khi cài Drawer lần đầu do câu lệnh cài thư viện trước đó không hoàn thành do phân quyền trên dự án hoặc lỗi phát sinh khiến quá trình cài đặt thư viện chưa hoàn thành. Để khắc phục lỗi này, lập trình viên cần tự khai báo các thư viện cần thiết như sau:

Bước 1 : Truy cập website hiển thị trên dòng lỗi:

Cài đặt câu lệnh với quyền Admin:

Khai báo : 

plugins: [

      …

      ‘react-native-reanimated/plugin’,

    ],

trong file babel.config.js

Tắt chương trình hoặc khởi động lại máy, chạy lại dự án xem kết quả : 

Lưu ý  sử dụng : npm start — –reset-cache để đảm bảo thư viện mới cài đặt được cập nhật 

Giảng viên: Nguyễn Thị Loan
Bộ môn Công nghệ thông tin
FPT Polytechnic Hà Nội

Cùng chuyên mục

Đăng Kí học Fpoly 2024

  • Max. file size: 512 MB.
  • Max. file size: 512 MB.
  • Max. file size: 512 MB.