React Native: Tạo Native Module trên android

I. Mở đầu:

Trong quá trình phát triển ứng dụng với React Native, đôi khi chúng ta gặp phải các chức năng mà ứng dụng cần quyền truy cập vào một API Platform mà React Native chưa có module tương ứng. Có thể bạn muốn sử dụng lại một số mã Java hiện có mà không cần phải thực hiện lại nó bằng JavaScript hoặc viết một số mã đa luồng, hiệu suất cao như để xử lý hình ảnh, cơ sở dữ liệu hoặc bất kỳ tiện ích mở rộng nâng cao nào.

Đừng lo lắng về điều đó, React Native cho phép bạn có thể viết native code thực sự và có quyền truy cập vào toàn bộ sức mạnh của nền tảng.
Trong bài viết này mình sẽ hướng dẫn các bạn cách tạo 1 Native Module đơn giản, bắt đầu thôi nào =)).

II. Tạo Native Module:

Ở ví dụ này chúng ta sẽ sử dụng Toast Module để tạo 1 toast message từ javascript.

B1: Bắt đầu với việc tạo native module.

Native module là một Java class thường kế thừa lớp ReactContextBaseJavaModule và triển khai các chức năng được yêu cầu bởi JavaScript.
Tạo một Java Class mới có tên ToastModule.java trong folder android/app/src/main/java/com/your-app-name/ với nội dung như sau: (Nếu lười gõ code thì vào link cuối bài coppy nhé :D)

B2: Đăng ký module

Bước cuối cùng trong Java là đăng ký module; điều này diễn ra trong createNativeModules của gói ứng dụng. Nếu một module không được đăng ký, nó sẽ không có sẵn trên JavaScript.
Tạo một Java Class mới có tên CustomToastPackage.java trong folder android/app/src/main/java/com/your-app-name/

B3: Khai báo Package

Vào file android/app/src/main/java/com/your-app-name/MainApplication.java và khai báo package vừa tạo vào getPackages method.

B4: Tạo file ToastExample.js

B5: Sử dụng trong App.js

Xong, giờ chạy react-native run-android để xem thành quả nhé =)).

III. Phần kết:

Ở bài viết này mình đã hướng dẫn các bạn cách tạo một Native Module đơn giản trên android, hy vọng các bạn có thể áp dụng chúng vào trong dự án của mình.

Bài viết được tham khảo từ:
https://reactnative.dev/docs/native-modules-android