[React Native Cơ Bản] Bài 5 – Navigation trong React Native – P1

Hi các em, trong bài này thầy giới thiệu tới các em đối tượng Navigation trong lập trình React Native

Lưu ý : Bài này thầy viết cho bản React Native mới nhất thời điểm hiện tại là 36.0.0 và sử dụng EXPO để phát triển nên câu lệnh cài đặt sẽ có 1 chút khác với sử dụng React Native CLI

Navigation là gì ?

Link gốc : https://facebook.github.io/react-native/docs/navigation

Navigation là Component trong React Native dùng để quản lý, chuyển màn hình trong lập trình ứng dụng React Native.

Mặc định Navigation không có trong node-modules nên khi cần sử dụng chúng ta cần cài đặt thông qua câu lệnh trước .

Bước 1 : Mở CMD, truy cập vào thư mục dự án với câu lệnh CD :

ví dụ : cd D:\Project\TenThuMuc

Nhập câu lệnh :
npm install @react-navigation/native @react-navigation/stack

Sau khi thành công chương trình hiển thị như sau :

Bước 2 : Tiếp tục cài đặt bổ sung với câu lệnh
expo install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

Khi cài đặt thành công, chương trình hiện như sau :

Các thành phần chính trong gói Navigation
NavigationContainer : để chứa toàn bộ các Component khác trong gói Navigation dùng cho việc quản lý chuyển đổi màn hình như tạo tabs, navigation drawer ….

VÍ DỤ 1 : Chuyển đổi màn hình với createStackNavigator

createStackNavigator là đối tượng dùng để quản lý chuyển đổi màn hình cơ bản nhất trong gói Navigation. để xem cách thức hoạt động ra sao, các em xem code phía dưới

Trong đoạn code trên các em sẽ thấy mỗi 1 màn hình được khai báo trong 1 thẻ <Stack.Screen> với 3 tham số
name : tên của màn hình, giá trị này dùng để định danh cho màn hình đó
component : tham chiếu tới file .js màn hình đó, trong ví dụ là màn hình Home được import ở dòng 4
options : khai báo 1 số thông tin cho màn hình đó như tiêu đề, nút back, actionBar ….

Màn hình Home.js chúng ta viết 1 nút với sự kiện chuyển màn hình như sau

Dòng 10 : câu lệnh chuyển màn hình với tham số là tên màn hình ‘Profile’ được định nữa ở file App.js thẻ Stack.Screen
Kế tiếp là truyền tham số name với giá trị là ‘Jane’ vào màn Profile

Code màn hình Profile :

Dòng 6 : lấy giá trị của biến name được truyền sang

Kết quả :

2 – Màn hình Profile
1 – Màn hình Home

Như vậy, thầy đã giới thiệu tới các em cách quản lý chuyển đổi màn hình đơn giản với Stack.Navigator. Trong phần kế tiếp, chúng ta sẽ tìm hiểu thêm về màn hình Tabs, Menu dạng Navigation Drawer nhé .
Mọi câu hỏi, thắc mắc các em liên hệ tại Fanpage chính thức Huy Nguyễn Lập trình Android A-Z nhé