React-native Navigation series. Part I.Introduction
Khi làm các ứng dụng thực tế, ngay cả các ứng dụng đơn giản nhất, chúng ta sẽ đối mặt với việc navigate, truyền data màn này sang màn khác, navigate back trở lại màn trước từ màn hiện tại, ….
Navigation trên mobile có các kiểu phổ biến sau:
- Stack Navigation: xếp chồng, màn này xếp chồng lên màn kia, giống như layer trên Photoshop, Illustrator.
Trong một ứng dụng phức tạp, Stack navigation có thể chia làm nhiều nhánh để dễ quản lý.
- TabBar Navigation: Có dạng như hình minh hoạ ở dưới, TabBar có thể đặt ở dưới màn hình hoặc trên màn hình. Các menu chính của app thường được đặt ở TabBar để người dùng có thể thấy và truy cập được ngay.
- Drawer Navigation (hay Sidebar Navigation): Có dạng như hình minh hoạ ở dưới, Drawer Navigation thường được dùng khi các menu chính không thể hiện hết ở TabBar, hoặc nhằm tối ưu diện tích hiển thị nội dung trên app.
Hiện nay có 2 thư viện phổ biến để thực hiện navigation trong react-native, đó là react navigation (https://reactnavigation.org/) và react-native-navigation (https://wix.github.io/react-native-navigation/#/). Trong đó react navigation là ứng cử viên nặng ký và có lượng người dùng đông đảo nhất.
React navigation từ v4 trở xuống được viết hoàn toàn bằng Javascript, thật đáng nể rằng việc xử lý Javascript của thư viện này cho cảm giác không khác gì nhiều so với react-native-navigation được viết hoàn toàn bằng native.
Tuy nhiên gần đây, react navigation tung ra v5, với nhiều module được viết bằng native, điển hình như Stack Navigation, ngoài ra có nhiều sự thay đổi đáng giá mà tôi tin rằng trong tương lai react navigation v5 sẽ thực sự lấy được nhiều fan từ react-native-navigation. Tuy nhiên, react-native-navigation lại rất dễ dùng và đáng được cân nhắc trong một số dự án.
Các bạn có thể đọc thêm về v5 tại đây https://reactnavigation.org/blog/2020/02/06/react-navigation-5.0.html
Trong Series về Navigation này, tôi sẽ trình bày với các bạn cách cài đặt, sử dụng cho react navigation cả v4 và v5, và react-native-navigation. Để các bạn có thể đưa ra lựa chọn cho mình khi triển khai các dự án mới hoặc cân nhắc nâng cấp, chuyển đổi.
Comments