Cài đặt Navigation trong React Native

Navigation là khái niệm quan trọng khi bắt đầu học lập trình 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 :