Sau 3 tháng không code React Native, giờ tui chính thức trở thành hai lúa của framework này rồi. Cũng vì vậy mà tui viết bài này để tổng hợp những cập nhật mới của RN cũng như giúp mình bò kịp thời đại 😎 😎

Tui bắt đầu "động tay" vào React Native khi nó ở phiên bản 0.55.4, version này tại thời điểm đó thật tốt nhưng nó cũng thiệt nhiều thứ kinh khủng. Cộng đồng tuy đông nhưng hỗ trợ rất kém, số lượng packages chưa nhiều, rồi thì 7 7 49 vấn đề liên quan đến manual link các packages,... Và rồi, chuyện gì đến rồi cũng sẽ đến, sự ra đời của phiên bản 0.60.0 với các đổi mới xịn xò như phép màu cứu rỗi cuộc đời của tui 😘😘

Chúng ta cùng lướt qua các tính năng "cứu tinh" cho anh em mobile developer nha.

0.60 - Hiện thân của thần dev

Chúng ta sẽ bắt đầu từ phiên bản 0.60 nhé.

Phiên bản này chính là bước ngoặt của anh iem RN developers với nhiều thay đổi từ nhỏ đến lớn bao gồm thay đổi demo code cho màn hình started; hỗ trợ cho Android X (cái này là breaking change đó, tui phải cập nhật và setup lại cho các dependencies trong dự án và cài đặt thêm jetify. Lỗi tè le); sử dụng CocoaPods để quản lý packages cho iOS làm mặc định, tách vài built-in components ra thành packages riêng để dễ maintain (kể như Geolocation, Webview, NetInfo).

Cuối cùng, update mang tính "đổi đời" của version này chính là tính năng tự động link các native modules được RN team giới thiệu là Autolinking. Với tính năng này tui không cần phải can thiệp quá sâu vào native code (Java, Android, Object-c) mà việc link các package diễn ra đơn giản hơn nhiều, nó được diễn ra tự động và giảm bớt việc cũng như bugs cho chúng ta - thứ gây nên nỗi kinh hoàng của tui mỗi khi sử dụng native modules.

0.61 - Ổn định, trường tồn, bất khuất

Khác với 0.60 mới hàng loạt các cập nhật khủng thì 0.61 có tính hoàn thiện, ổn định hơn. Đây cũng là version 0.6x đầu tiên tui sử dụng vì ở version này các packages open source của react native cũng được cập nhật để tương thích với version 0.6x. Có 2 cập nhật quan trọng ở version 0.61 là .xcodeproj đã bị xóa khỏi core của react-native-cli và sự kết hợp của Live reloading và Hot reloading thành Fast Reloading giúp việc tải lại màn hình mỗi khi save ổn định và chính xác hơn xxxxx lần 🤩🤩

0.62 - Easy debug, easy dark mode

0.62 ra mắt tính năng debug mặc định bằng Flipper - "a developer tool for debugging mobile apps" với giao diện trực quan, dễ sử dụng, danh sách chức năng đầy đủ và cho phép mở rộng bằng các tải các plugins từ npm về để tùy chỉnh, đây là danh sách các plugins có sẵn.

Các tính năng nổi bật của Flipper bao gồm Metro Actions, Crash Reporter, React Devtool, Network Inspector, Metro and Device Logs, Native Layout Inspector, Database and Preference Inspectors. Các bạn có thể xem chi tiết các tính năng này ở đây. Cá nhân tui thì vẫn thích sử dụng react-native-debugger nên chưa có nhiều cơ hội sử dụng Flipper 😋

Cập nhật quan trọng tiếp theo mang tính "trend" để đáp ứng nhu cầu của người dùng đó là ra mắt module Appearance và hook useColorScheme hỗ trợ cho chế độ dark mode trên thiết bị di động.

Module Appearance cho phép ứng dụng của chúng ta nhận biết được chế độ màu hiện tại của thiết bị bằng hàm getColorScheme , kết quả trả về sẽ là light, dark hoặc null nếu user không cài đặt color schema (tui giữ nguyên tiếng Anh để tránh sai nghĩa). 

const colorScheme = Appearance.getColorScheme();

if (colorScheme === 'dark') {
  // Use dark color scheme
}

Hook useColorScheme cho phép theo dõi những thay đổi color scheme thông qua Appearance.

import { Text, useColorScheme } from 'react-native';

const MyComponent = () => {
  const colorScheme = useColorScheme(); // light, dark or null

  return useColorScheme(): {colorScheme};
};

Các bạn có thể tham khảo code đầy đủ ở AppearanceExample.js nha.

Đối với phiên bản 0.62 thì có một break changes các bạn cần lưu ý là PropTypes đã bị xóa ra khỏi core components của React Native, các bạn cần thêm package prop-types vào dự án để sử dụng nhé. 

0.63 - Trải nghiệm dev xịn xò, trải nghiệm sản phẩm trơn tru

Mặc dù Logbox đã ra mắt ở phiên bản 0.62 nhưng đến 0.63 nó đã chính thức trở thành trình báo lỗi mặc định của React Native. Logbox đã được thiết kế để đọc lỗi dễ hơn. Chức năng mà tui thích nhất là nó có giao diện trực quan để thông báo những lỗi cú pháp. Cá nhân tui thấy chức năng này thiệt sự giúp ích đấy, những mini box báo lỗi hồi trước tui thường hay bỏ qua lắm (có lẽ do tui) 🤣🤣

Điểm nổi bật tiếp theo của version này là sự ra đời của Pressable component cho phép anh em dev chúng ta dễ dàng tùy chỉnh phản hồi chạm theo từng giai đoạn để tối đa hóa trải nghiệm người dùng ở các nền tảng/thiết bị khác nhau. Bạn có thể tìm hiểu thêm về component này tại đây.

Version này cũng ra mắt API PlatformColor và DynamicColorIOS để dễ dàng truy cập vào hệ thống màu của thiết bị và lấy ra giá trị có độ chính xác cao hơn đó, đừng quên sử dụng nó cho chế độ dark mode của bạn nha 😉😉

Tổng kết

Đến đây chúng ta nắm hầu hết những cập nhật quan trọng của React Native trong việc phát triển, ngoài ra còn có những cập nhật khác các bạn có thể tham khảo ở những link mình đặt bên dưới. Chúc các bạn và cả mình luôn theo kịp thời đại và sử dụng tốt các tính năng để tăng hiệu suất và chất lượng sản phẩm. 😂

Nguồn tham khảo