Báo cáo tìm hiểu về integrating native module

BÁO CÁO TÌM HIỂU VỀ INTEGRATING NATIVE MODULE Nội dung tìm hiểu: Integrating Native Module Chương 1: TỔNG QUAN LÝ THUYẾT Giới thiệu Native Module Đôi React Native app cần truy cập vào native API mà Javascript chưa hỗ trợ, ví dụ native API để truy cập vào Apple Store or Google Play Hoặc bạn muốn tái sử dụng lại thư viện Native có sẵn mà khơng cần phải triển khai lại chúng Javascript hay bạn code thứ cần hiệu suất cao đa luồng, lúc Native Module thứ giúp bạn Native Module cho phép viết code native (Java, Kotlin, Swift, Objective-C C++) sau ánh xạ chúng thành code Javascript để thực thi Các bước để tạo Native Module (Android) - Mở thực mục android project bạn - Nếu bạn tạo project Expo mặc định khơng có thư mục android bạn phải dùng lệnh: expo eject sau đặt tên package cho ứng dụng - Tạo custom native module file (.java) theo đường dẫn: android/app/src/main/java/com/your-app-name/ - Để module xem React Native Module bạn cần phải kế thừa abstract class ReactContextBaseJavaModule, sau override lại constructor method getName lớp Note: Ngoài bạn kế thừa TurboModules nhiên giai đoạn phát triển dự kiến thay ReactContextBaseJavaModule tương lai - Tạo method cho module bạn - Để native method gọi Javascript cần thỏa mãn yếu tố sau (xem hình để thấy rõ hơn):  Cần có annotation @ReactNative  Phạm vi truy cập public  Kiểu trả void  Kiểu tham số phải số kiểu sau đây: boolean(Boolean), double(Double), String, Callback, ReadableMap ReadableArray - Các kiểu nói ánh xạ qua Javascript liệt kê bảng đây: Java Boolean boolean Double double String Callback ReadableMap ReadableArray Javascript ?boolean boolean ?number Number String Function Object Array Note: Ngoài kiểu int(Integer), float(Float) phép sử dụng kiểu cho tham số truyền vào, TurboModules khơng cịn hỗ trợ chúng tránh dùng kiểu - Tạo package (.java) để thêm module vào theo đường dẫn: android/app/src/main/java/com/your-app-name/ - Để package xem React Native Package phải implement interface ReactPakage Override lại hai method createViewManagers createNativeModules - Trong method createNativeModules ta thêm vào module mà ta tạo - Trong file MainApplication.java, biến mReactNativeHost, thêm vào package mà tạo - Bây ta gọi native module từ Javascript Chương 2: DEMO ÁP DỤNG Định nghĩa DEMO Ứng dụng demo gồm có ba hình: - Màn hình đăng nhập - Màn hình đăng kí - Màn hình thêm khách hàng Đầu tiên hình đăng nhập, chưa có tài khoản ta đăng kí tài khoản Để cho đơn giản, ứng dụng không sử dụng database thật mà dùng SharedPreferences android khơng mã hóa mật Sau đăng nhập thành công ta đưa vào hình thêm khách hàng Các bước thực - Cài đặt thư viện cần thiết: - Cấu trúc thư mục ứng dụng - Tổng quan phân cấp screen, component context ứng dụng - Trong App.js ta sử dụng StackNavigator để di chuyển qua lại hình ứng dụng - HomeScreen.js - RegisterScreen.js - AddCustomerScreen.js - SharedMemoryModule.js - RegisterContext.js LoginContext.js - CurrentContext.js: lưu lại context component TextInput sử dụng - TextInput.js - UsernameTextInput.js - PasswordTextInput.js UserTextInput.js - CoupleButtons.js - SharedMemoryModule.java (Native module) ... createNativeModules - Trong method createNativeModules ta thêm vào module mà ta tạo - Trong file MainApplication.java, biến mReactNativeHost, thêm vào package mà tạo - Bây ta gọi native module. .. luồng, lúc Native Module thứ giúp bạn Native Module cho phép viết code native (Java, Kotlin, Swift, Objective-C C++) sau ánh xạ chúng thành code Javascript để thực thi Các bước để tạo Native Module. .. custom native module file (.java) theo đường dẫn: android/app/src/main/java/com/your-app-name/ - Để module xem React Native Module bạn cần phải kế thừa abstract class ReactContextBaseJavaModule,