Nội dung bài học
Một trong những lợi ích chính của việc sử dụng React Native là API gốc (native APIs) có thể dễ dàng được truy cập và sử dụng với JavaScript. Trong phần này, chúng ta sẽ đề cập đến các cross-platform API có sẵn. Khi truy cập các API này, chúng ta có thể sử dụng một cơ sở mã duy nhất (single codebase) để triển khai chức năng dành riêng cho nền tảng trên cả iOS và Android. Chúng ta sẽ tìm hiểu các API dành riêng cho các nền tảng iOS (iOS-specific APIs) và Android (Android-specific APIs) trong phần sau.
Cảnh báo là một mẫu giao diện người dùng phổ biến trên cả web và thiết bị di động và đó là một cách dễ dàng để cho người dùng biết về điều gì đó đang xảy ra trong ứng dụng, như cảnh báo được sử dụng nếu quá trình tải xuống hoàn tất, có lỗi đã xảy ra hoặc quá trình không đồng bộ (chẳng hạn như đăng nhập) đã hoàn tất.
Alert tạo ra cảnh báo cho ứng dụng trên cả hai nền tảng iOS và Android Bằng cách kích hoạt bằng cách gọi phương thức alert: Alert.alert(title, message, buttons, options)
Các đối số phương thức alert:
Một ví dụ về sử dụng Alert
Chú ý: Alert sẽ không hiển thị trên nền tảng Web. Chúng ta cài Expo Go trên thiết bị di động và quét mã QR của ứng dụng.
AppState sẽ cho bạn biết ứng dụng đang hoạt động, không hoạt động hay ở chế độ background. Về cơ bản, nó gọi một phương thức bất cứ khi nào trạng thái ứng dụng thay đổi, cho phép bạn thực hiện các hành động hoặc gọi các phương thức khác dựa trên trạng thái của ứng dụng (tham khảo về trạng thái ứng dụng tại https://ngocminhtran.com/2018/07/29/chu-ky-song-cua-ung-dung-android-va-activity/ để hiểu background hay foreground).
AppState là một API hữu ích. Nhiều lần, khi ứng dụng ở chế độ foreground, bạn có thể muốn thực hiện những việc như tìm nạp dữ liệu mới từ API của bạn—và đó là trường hợp sử dụng tuyệt vời cho AppState.
Một trường hợp sử dụng khác là xác thực. Khi ứng dụng được đặt ở chế độ foreground, bạn có thể muốn thêm một lớp bảo mật khác, chẳng hạn như mã PIN hoặc dấu vân tay.
Nếu bạn đang thực hiện bỏ phiếu, chẳng hạn như truy cập cơ sở dữ liệu cứ sau 15 giây hoặc lâu hơn để kiểm tra dữ liệu mới, bạn có thể muốn tắt bỏ phiếu khi người dùng đẩy ứng dụng vào lý lịch. AppState cũng là một trường hợp sử dụng tuyệt vời cho việc này.
Chương trình minh họa:
Trong ví dụ này, chúng ta import các thành phần cần thiết từ react-native và định nghĩa một thành phần hàm App. Chúng ta sử dụng hook useState để khởi tạo biến appState và hook useEffect để đăng ký lắng nghe sự thay đổi trạng thái ứng dụng.
Trong hook useEffect, chúng ta thêm một trình lắng nghe sự kiện cho sự kiện 'change' của AppState. Hàm xử lý sự kiện handleAppStateChange được gọi mỗi khi trạng thái ứng dụng thay đổi và nó cập nhật biến appState bằng cách sử dụng hàm setAppState.
Câu lệnh return trong hook useEffect dọn dẹp trình lắng nghe sự kiện khi thành phần bị unmount, đảm bảo không có rò rỉ bộ nhớ.
Cuối cùng, chúng ta hiển thị một thành phần View đơn giản với một thành phần Text để hiển thị trạng thái ứng dụng hiện tại.
AsyncStorage là một API trong React Native dùng để lưu trữ dữ liệu trên thiết bị di động. Nó cho phép bạn lưu trữ và truy xuất dữ liệu từ bộ nhớ cục bộ của ứng dụng. Dưới đây là một số phương thức quan trọng của AsyncStorage:
Các phương thức này cho phép bạn lưu trữ và truy xuất dữ liệu từ AsyncStorage một cách đơn giản trong React Native. Bạn có thể sử dụng chúng để lưu trữ thông tin người dùng, cài đặt ứng dụng, hoặc bất kỳ dữ liệu nào khác mà bạn cần lưu trữ cục bộ trên thiết bị di động của người dùng.
Chương trình minh họa:
Clipboard API là một API trong React Native cho phép bạn truy cập và tương tác với bộ nhớ clipboard trên thiết bị di động. Nó cho phép bạn sao chép (copy) và dán (paste) nội dung văn bản giữa ứng dụng của bạn và các ứng dụng khác. Dưới đây là một số phương thức quan trọng của Clipboard API:
Các phương thức này cho phép bạn tương tác với bộ nhớ clipboard trong React Native. Bạn có thể sử dụng chúng để sao chép nội dung từ ứng dụng của mình và dán nó vào các ứng dụng khác hoặc ngược lại. Việc sử dụng Clipboard API rất hữu ích khi bạn muốn chia sẻ hoặc di chuyển dữ liệu văn bản giữa các ứng dụng khác nhau trên thiết bị di động.
Chương trình minh họa:
Trong ví dụ này, chúng ta có một ứng dụng đơn giản với một ô nhập văn bản và nút "Sao chép". Khi người dùng nhập văn bản và nhấn nút "Sao chép", giá trị được sao chép vào clipboard bằng cách sử dụng Clipboard.setString(text). Sau đó, giá trị được sao chép sẽ hiển thị dưới dạng "Văn bản đã sao chép".
Dimensions API trong React Native cung cấp các phương thức để lấy thông tin về kích thước và hình dạng của thiết bị. Nó giúp bạn thích nghi giao diện người dùng với các kích thước và tỷ lệ khác nhau của các thiết bị di động. Dưới đây là một số phương thức quan trọng của Dimensions API:
Chương trình minh họa:
Trong ví dụ này, chúng ta sử dụng Dimensions API để lấy kích thước màn hình ban đầu và cập nhật kích thước màn hình khi có sự thay đổi. Bên trong useEffect, chúng ta đăng ký một hàm updateScreenSize để cập nhật giá trị của screenWidth và screenHeight dựa trên kích thước màn hình mới. Hàm updateScreenSize được gọi mỗi khi có sự thay đổi kích thước màn hình. Chúng ta cũng sử dụng return trong useEffect để huỷ đăng ký sự kiện khi component unmount. Trên giao diện người dùng, chúng ta hiển thị kích thước màn hình thông qua một đoạn văn bản. Khi kích thước màn hình thay đổi, đoạn văn bản sẽ được cập nhật hiển thị kích thước mới.
Geolocation API trong React Native cung cấp các phương thức để truy cập và sử dụng dữ liệu vị trí của thiết bị. Nó cho phép ứng dụng của bạn lấy thông tin về vị trí địa lý của người dùng như tọa độ địa lý (latitude và longitude), tốc độ, hướng và độ chính xác. Dưới đây là một số phương thức quan trọng của Geolocation API:
Geolocation API cho phép bạn truy cập thông tin vị trí của thiết bị và theo dõi sự thay đổi vị trí. Bằng cách sử dụng các phương thức này, bạn có thể tích hợp tính năng dựa trên vị trí vào ứng dụng của mình, chẳng hạn như hiển thị bản đồ, tìm kiếm địa điểm gần bạn, và các chức năng liên quan đến vị trí.
Chương trình minh họa:
Trong ví dụ này, chúng ta sử dụng Geolocation API của Expo để lấy vị trí hiện tại của thiết bị. Trong useEffect, chúng ta yêu cầu quyền truy cập vị trí và sau đó sử dụng Location.getCurrentPositionAsync({}) để lấy vị trí hiện tại. Kết quả được hiển thị trên giao diện người dùng, hiển thị tọa độ vị trí hiện tại của thiết bị. Nếu quyền truy cập vị trí bị từ chối, thông báo lỗi sẽ được hiển thị.
Keyboard API trong React Native cung cấp các phương thức và sự kiện để tương tác với bàn phím của thiết bị di động. Nó cho phép ứng dụng của bạn kiểm soát hiển thị và ẩn bàn phím, đồng thời cung cấp các sự kiện để phản ứng khi trạng thái bàn phím thay đổi. Dưới đây là một số phương thức và sự kiện quan trọng của Keyboard API:
Keyboard API cho phép bạn kiểm soát hiển thị và ẩn bàn phím cũng như phản ứng khi trạng thái bàn phím thay đổi. Bằng cách sử dụng các phương thức và sự kiện này, bạn có thể tạo các trải nghiệm tốt hơn về nhập liệu trong ứng dụng của mình và điều chỉnh giao diện người dùng phù hợp với trạng thái bàn phím.
Chương trình minh họa:
Trong ví dụ này, chúng ta sử dụng state keyboardVisible để theo dõi trạng thái của bàn phím (hiển thị hoặc ẩn). Khi sự kiện 'keyboardDidShow' được kích hoạt, chúng ta cập nhật state keyboardVisible thành true, và khi sự kiện 'keyboardDidHide' được kích hoạt, chúng ta cập nhật state keyboardVisible thành false. Trong giao diện người dùng, chúng ta hiển thị thông báo tương ứng dựa trên trạng thái của bàn phím. Nếu keyboardVisible là true, chúng ta hiển thị thông báo "Bàn phím đã hiển thị", ngược lại, chúng ta hiển thị thông báo "Bàn phím đã ẩn".
NetInfo API trong React Native cung cấp các phương thức và sự kiện để theo dõi trạng thái kết nối mạng của thiết bị. Nó cho phép ứng dụng của bạn kiểm tra xem thiết bị có kết nối mạng hay không, loại kết nối mạng đang được sử dụng, và theo dõi sự thay đổi trong trạng thái kết nối mạng. Dưới đây là một số phương thức và sự kiện quan trọng của NetInfo API:
NetInfo API cho phép bạn kiểm tra trạng thái kết nối mạng của thiết bị và theo dõi sự thay đổi trong trạng thái đó. Bằng cách sử dụng các phương thức và sự kiện này, bạn có thể điều chỉnh ứng xử của ứng dụng dựa trên trạng thái kết nối mạng, ví dụ như hiển thị thông báo khi mất kết nối hoặc tải lại dữ liệu khi kết nối được khôi phục.
Chương trình minh họa:
Trong ví dụ này, chúng ta sử dụng NetInfo API để theo dõi trạng thái kết nối mạng của thiết bị. Trong useEffect, chúng ta sử dụng NetInfo.addEventListener() để đăng ký một hàm nghe sự kiện thay đổi trong trạng thái kết nối mạng. Mỗi khi sự kiện xảy ra, hàm nghe sẽ được gọi và chúng ta cập nhật giá trị của connectionType và isConnected tương ứng.
Trong giao diện người dùng, chúng ta hiển thị thông tin về loại kết nối mạng (connectionType) và trạng thái kết nối (isConnected). Các thông tin này được cập nhật khi có sự thay đổi trong trạng thái kết nối mạng.
PanResponder API trong React Native cho phép bạn xử lý các sự kiện liên quan đến chạm và di chuyển trên giao diện người dùng. Nó cung cấp các phương thức và sự kiện để bạn có thể điều khiển và phản ứng với các tương tác người dùng như vuốt, kéo và thả, hoặc xoay. Dưới đây là một số phương thức quan trọng của PanResponder API:
PanResponder API cho phép bạn tạo và điều khiển các tương tác chạm và di chuyển trên giao diện người dùng. Bằng cách sử dụng các phương thức và sự kiện này, bạn có thể phản ứng và thực hiện các hành động tùy chỉnh dựa trên tương tác người dùng.
Chương trình minh họa:
Trong ví dụ này, chúng ta sử dụng useRef để tạo một tham chiếu đến giá trị pan sử dụng Animated.ValueXY(), đại diện cho vị trí của hình vuông trên màn hình.
Chúng ta tạo một panResponder bằng cách sử dụng PanResponder.create() và gán nó cho tham chiếu panResponder. Trong đó, chúng ta xác định các phương thức xử lý sự kiện như onStartShouldSetPanResponder, onPanResponderMove và onPanResponderRelease. Trong phương thức onPanResponderRelease, chúng ta sử dụng pan.setValue({ x: 0, y: 0 }) để đặt lại vị trí của hình vuông về vị trí ban đầu.
Trong giao diện người dùng, chúng ta sử dụng một Animated.View để hiển thị hình vuông. Chúng ta áp dụng transform cho Animated.View bằng cách sử dụng giá trị pan.x và pan.y. Chúng ta cũng áp dụng panHandlers từ panResponder cho Animated.View, cho phép hình vuông phản ứng với các sự kiện chạm và di chuyển.
Trong mục này chúng ta sẽ tìm hiểu các API dành riêng cho các nền tảng iOS (iOS-specific APIs) như DatePickerIOS, ProgressViewIOS và ActionSheetIOS. Một số API khác được khuyến nghị không dùng hay bị xóa từ các phiên bản mới nhất của React Native như PickerIOS , SegmentedControlIOS hay TabBarIOS sẽ không đề cập.
DatePickerIOS API trong React Native cung cấp các thành phần và phương thức để tạo và quản lý một DatePicker cho việc chọn ngày trong ứng dụng. Dưới đây là các phương thức chính của DatePickerIOS API:
Các phương thức này được sử dụng để tạo và quản lý DatePickerIOS trong ứng dụng React Native. Bạn có thể sử dụng chúng để định cấu hình DatePickerIOS và xử lý sự kiện khi ngày được chọn thay đổi.
Chương trình minh họa:
Chọn My Device, quét mã QR trên iOS để xem kết quả.
ProgressViewIOS API trong React Native là một thành phần dùng để hiển thị một thanh tiến trình (progress bar) trên ứng dụng di động iOS. Thanh tiến trình là một công cụ trực quan để hiển thị tiến độ hoàn thành của một tác vụ hoặc quá trình đang diễn ra.
ProgressViewIOS Component là một thành phần có sẵn trong react-native cho phép bạn tạo và hiển thị thanh tiến trình.
Các Props quan trọng:
Chương trình minh họa:
Chọn My Device, quét mã QR trên iOS để xem kết quả.
Trong ví dụ này, chúng ta sử dụng một thành phần ProgressViewIOS để hiển thị thanh tiến trình. Sử dụng useState để theo dõi giá trị tiến trình và useEffect để tạo một hiệu ứng tiến trình tự động tăng giá trị sau mỗi khoảng thời gian. Khi giá trị tiến trình đạt tới 1, ta ngừng tăng giá trị.
ActionSheetIOS API trong React Native là một thành phần dùng để hiển thị một menu chọn hành động (action sheet) trên ứng dụng di động iOS. Menu này thường xuất hiện dưới cùng của màn hình và chứa danh sách các tùy chọn mà người dùng có thể chọn để thực hiện một hành động cụ thể.
ActionSheetIOS Component là một API tương tác mà bạn gọi để hiển thị menu chọn hành động.
Phương thức showActionSheetWithOptions(Options, Callback): Phương thức này dùng để hiển thị menu chọn hành động. Bạn cần cung cấp một đối tượng Options chứa thông tin về các tùy chọn và một hàm Callback sẽ được gọi khi người dùng chọn một tùy chọn cụ thể. Chi tiết về các đối số:
Chương trình minh họa:
Chọn My Device, quét mã QR trên iOS để xem kết quả.
Trong ví dụ này, khi người dùng nhấn vào nút "Show Action Sheet", showActionSheet được gọi để hiển thị menu chọn hành động. Một hộp thoại xuất hiện với các tùy chọn (Option 1, Option 2, Option 3) và một tùy chọn "Cancel". Khi người dùng chọn một tùy chọn, hàm callback được gọi để xử lý hành động tương ứng.
Trong mục này chúng ta sẽ tìm hiểu các API dành riêng cho các nền tảng Android (Android-specific APIs) như DrawerLayoutAndroid, DatePickerAndroid, TimePickerAndroid và ToastAndroid . Một số API khác được khuyến nghị không dùng hay bị xóa từ các phiên bản mới nhất của React Native như ToolbarAndroid, ViewPagerAndroid sẽ không đề cập.
DrawerLayoutAndroid là một thành phần trong React Native được sử dụng để tạo ra một thanh đựng (drawer) có thể kéo ra và đẩy vào bên trong màn hình ứng dụng. Thành phần này thường được sử dụng để tạo menu điều hướng hoặc các tùy chọn hiển thị ngoài màn hình chính.
Thành phần DrawerLayoutAndroid chỉ hoạt động trên nền tảng Android và tương tự như thành phần DrawerLayout trong Android native development. Một số thuộc tính quan trọng (props):
Ví dụ minh họa:
DatePickerAndroid là một thành phần trong React Native được sử dụng để hiển thị một picker ngày tháng (date picker) trên nền tảng Android. Picker này cho phép người dùng chọn một ngày cụ thể từ một giao diện có sẵn. Các phiên bản mới của React Native khuyến nghị không dùng API này mà thay thế bằng DateTimePicker. Minh họa sau dùng DateTimePicker:
TimePickerAndroid là một thành phần trong React Native được sử dụng để hiển thị một picker thời gian (time picker) trên nền tảng Android. Picker này cho phép người dùng chọn một thời gian cụ thể từ một giao diện có sẵn. Các phiên bản mới của React Native khuyến nghị không dùng API này mà thay thế bằng DateTimePicker. Minh họa sau dùng DateTimePicker:
ToastAndroid là một thành phần trong React Native được sử dụng để hiển thị thông báo tạm thời (toast) trên nền tảng Android. Toast là một giao diện gợi ý ngắn gọn xuất hiện trong một khoảng thời gian ngắn để thông báo cho người dùng về một tình huống cụ thể.
Phương thức quan trọng của API này là show(message, duration) hiển thị toast với nội dung message và thời gian duration quy định thời gian tồn tại của toast. duration có các lựa chọn:
Ví dụ minh họa