Học React Native từ cơ bản đến nâng cao – Phần 4: Gọi Native UI (Android) trong React Native

Tram Ho

Trong bài viết này tôi sẽ giới thiệu với các bạn cách sử dụng Native UI trong React Native.

Do không có nhiều thời gian nên tôi xin phép giới hạn bài này giành cho Android 😄. Từ ví dụ này các bạn sẽ tự dựng cho mình các bộ native ui phù hợp cho project của bạn dựa trên các thư viện UI đã có sẵn.

1. Giới thiệu

Hiện nay có hàng nghìn thư viện native ui đang được sử dụng và 1 trong số đó đã trở thành library không thể thiếu cho ứng dụng mobile. Nhưng React Native hiện nay chỉ đáp ứng được phần nào yêu cầu về UI. Nếu như bạn đi đâu đó tìm thấy app có giao diện đẹp rồi tìm trên mạng thì cũng chỉ có thể tìm ra các library native cho Android và iOS còn React Native thì không thấy đâu.

Các bạn yên tâm đi, nếu như đã có library cho Android và iOS thì kiểu gì cũng sẽ tạo được bộ libray React Native. Tại sao ư ? Chúng ta sẽ quay trở lại 1 chút bản chất của React Native.

Như hình trên thì ứng dụng của bạn có 3 thành phần:

  1. Native Code/Modules: là sẽ chứa api, nền tảng của platform để build ứng dụng của bạn
  2. Javacript VM: là máy ảo thực thi tất cả các lệnh JavaScript Code của bạn.
  3. React Native Bridge: sẽ chịu trách nhiệm làm cầu nối liên kết giữa native và javascript với nhau.

(các bạn nếu hiểu rõ hơn có thể xem ở link sau: https://www.reactnative.guide/3-react-native-internals/3.1-react-native-internals.html)

Okay, đến đây chúng ta hình dung ra 3 bước cần phải làm:

  1. Dựng native (bước này không cần làm gì đã có hàng vạn library sẵn có)
  2. Viết RN Bridge để có thể gọi được trong code javascript
  3. Gọi native UI trong code React Native.

2. Yêu cầu ban đầu

Đầu tiên chọn 1 library native ui để làm ví dụ.
https://github.com/dmytrodanylyk/circular-progress-button

Sau đó các bạn cài đặt:

  • Android SDK, Android Studio
  • React Native CLI
  • VS Code

Chi tiết các bạn có thể xem trong https://facebook.github.io/react-native/docs/getting-started

3. Sử dụng Native UI trong React Native

Để tiện theo dõi ví dụ các bạn hãy tải source code theo link dưới đây
https://github.com/oTranThanhNghia/TestNativeUiDemo

hoặc lệnh sau:

3.1. Import native library vào project

Các bạn mở Android Studio, vào file buid.gradle

Thêm đoạn implementation 'com.github.dmytrodanylyk.circular-progress-button:library:1.1.3'

vào trong dependencies

rồi ta đợi trong ít phút để Android Studio tải các library cần thiết về máy

3.2. Implement SimpleViewManager

Trong ví dụ này chúng ta sẽ tạo ReactProgressButtonManager được kế thừa từ SimpleViewManager

3.3. Tạo createViewInstance method

View sẽ được tạo trong createViewInstance và đi kèm với state mặc định của ứng dụng.

3.4. Tạo cầu nối với các property của native ui

Bằng cách sử dụng @ReactProp (hoặc @ReactPropGroup) thì thuộc tinh properties của native ui sẽ được tham chiếu trong Javascript.

3.5. Implement ReactPackage và đăng ký ViewManager

Tạo NativeViewPackage để có thể đăng ký ReactProgressButtonManager vào trong Application.

3.6. Đăng ký NativeViewPackage vào trong MainApplication

3.7. Tạo Javascript module

Tạo project React Native:

Okay, bây giờ các bạn mở VS Code lên và chọn project bạn vừa tạo xong.

Tạo file CircularProgressButton.js

Sau đó điền đoạn code sau:

Done ! Bạn đã tạo xong module và giờ bạn muốn sử dụng thì chỉ cần

4. Demo

Ngoài ví dụ của tôi các bạn có thể tham khảo 1 số library nổi tiếng để hiểu rõ hơn về cách gọi native ui component:

https://github.com/react-native-community/react-native-video

5. Tài liệu tham khảo

  1. https://medium.com/@atul.sharma_94062/how-to-develop-android-ui-component-for-react-native-fddd141f5ae4
  2. https://facebook.github.io/react-native/docs/native-components-android
  3. https://github.com/dmytrodanylyk/circular-progress-button
Chia sẻ bài viết ngay

Nguồn bài viết : Viblo