reactnative newarchitecture cpp nativemodules

Bật Mí Sức Mạnh Của C++ Trong React Native 0.79: Xây Dựng Turbo Native Module Đa Nền Tảng!

Lê Lân

23/07/2025

Hướng Dẫn Tạo Cross-Platform C++ Turbo Native Modules Trong React Native 0.79

Mở Đầu

Trong thế giới phát triển ứng dụng di động ngày nay, việc tối ưu hiệu năng và tái sử dụng code giữa các nền tảng là vấn đề luôn được quan tâm hàng đầu. React Native tiếp tục cập nhật và cải thiện, đặc biệt với phiên bản 0.79, khả năng tích hợp native code ngày càng hiệu quả.

React Native 0.79 giới thiệu cải tiến trong việc tạo các module native bằng C++ thông qua TurboModules và hệ thống JSI (JavaScript Interface). Việc này không chỉ giúp chia sẻ logic nền tảng một cách tối ưu giữa Android và iOS mà còn tăng hiệu suất thực thi, giảm thiểu việc trùng lặp code.

Trong bài viết này, chúng ta sẽ cùng nhau khám phá:

✅ Cách tạo một C++ Turbo Native Module cơ bản ✅ Cấu hình Codegen để khai báo module trong TypeScript ✅ Triển khai logic native duy nhất cho cả hai nền tảng ✅ Đăng ký module tại Android và iOS ✅ Kiểm thử module trong JavaScript

Tại Sao Nên Sử Dụng Cross-Platform C++?

1. Giữ Một Nguồn duy nhất cho logic

Việc viết một lần rồi dùng chung trên cả Android và iOS giúp tiết kiệm thời gian phát triển cũng như công sức duy trì code. Thay vì phải viết Kotlin cho Android và Swift/Objective-C cho iOS, C++ cho phép bạn tập trung code ở một nơi.

2. Tối ưu hoá hiệu năng

C++ được thiết kế để truy cập mức thấp hệ thống, cực kỳ tối ưu khi xử lý các tác vụ nặng như mã hoá, xử lý chuỗi, multimedia. Thậm chí có thể vượt trội hơn JavaScript hay nhiều API native khác.

3. Chia sẻ code rộng rãi

Bạn có thể sử dụng lại các module C++ qua nhiều ứng dụng, nhóm phát triển hoặc SDK khác nhau để đảm bảo tính đồng nhất trong logic.

4. Tận dụng thư viện C++ sẵn có

Hệ sinh thái đồ sộ như OpenCV, SQLite, Boost… giúp bạn nhanh chóng tích hợp các tính năng phức tạp mà không phải viết lại từ đầu.

5. Tích hợp sâu với Kiến trúc React Native mới

TurboModules kết hợp với JSI giúp liên kết JS và C++ trơn tru, giảm overhead, cải thiện quản lý bộ nhớ và tốc độ gọi hàm.

Bước 1: Tạo JavaScript Specs (TypeScript)

Turbo Native Modules yêu cầu file đặc tả interface bằng TypeScript để Codegen tạo khung chuẩn.

Tạo thư mục specs trong root dự án

Thêm file NativeSampleModule.ts với nội dung:

import { TurboModule, TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  reverseString(input: string): string;
}

export default TurboModuleRegistry.getEnforcing<Spec>('NativeSampleModule');

🔹 Lưu ý quan trọng:

Tên file bắt đầu với "Native" (ví dụ: NativeSampleModule.ts)

Bắt buộc giữ file dưới dạng .ts để Codegen nhận diện

Định nghĩa interface Spec với các phương thức của module

Bước 2: Cấu Hình Codegen

Chỉnh sửa file package.json để cấu hình Codegen:

"codegenConfig": {
  "name": "AppSpecs",
  "type": "modules",
  "jsSrcsDir": "specs",
  "android": {
    "javaPackageName": "com.yourpackagename.specs"
  }
}

Thay com.yourpackagename thành tên package Android bạn dùng

Cấu hình này giúp Codegen biết nơi tìm specs và sinh ra mã nền tảng tương ứng

Bước 3: Viết C++ Native Module

Tạo thư mục chia sẻ code

Tạo folder tên shared ở cùng cấp với android và ios

Định nghĩa header (NativeSampleModule.h)

// shared/NativeSampleModule.h
#pragma once
#include <AppSpecsJSI.h>
#include <memory>
#include <string>

namespace facebook::react {

class NativeSampleModule : public NativeSampleModuleCxxSpec<NativeSampleModule> {
 public:
  NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker);
  std::string reverseString(jsi::Runtime& rt, std::string input);
};

}  // namespace facebook::react

Cài đặt module (NativeSampleModule.cpp)

// shared/NativeSampleModule.cpp
#include "NativeSampleModule.h"

namespace facebook::react {

NativeSampleModule::NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker)
  : NativeSampleModuleCxxSpec(std::move(jsInvoker)) {}

std::string NativeSampleModule::reverseString(jsi::Runtime& rt, std::string input) {
  return std::string(input.rbegin(), input.rend());
}

}  // namespace facebook::react

🔹 Ý nghĩa:

Header khai báo phương thức reverseString

Triển khai logic đảo ngược chuỗi dùng iterator ngược

Phần code C++ này dùng chung được trên cả Android và iOS

Bước 4: Đăng Ký Module Trên Android

4.1 Thêm file CMakeLists.txt

Tạo android/app/src/main/jni/CMakeLists.txt :

cmake_minimum_required(VERSION 3.13)
project(appmodules)

include(${REACT_ANDROID_DIR}/cmake-utils/ReactNative-application.cmake)

target_sources(${CMAKE_PROJECT_NAME} PRIVATE ../../../../../shared/NativeSampleModule.cpp)

target_include_directories(${CMAKE_PROJECT_NAME} PUBLIC ../../../../../shared)

4.2 Cập nhật `build.gradle`

buildTypes {
  debug {
    signingConfig signingConfigs.debug
  }
  release {
    signingConfig signingConfigs.debug
    minifyEnabled enableProguardInReleaseBuilds
    proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
  }
}

externalNativeBuild {
  cmake {
    path "src/main/jni/CMakeLists.txt"
  }
}

4.3 Đăng ký Native Module

Tải file OnLoad.cpp chạy lệnh curl (chạy từ android/app/src/main/jni ):

curl -O https://raw.githubusercontent.com/facebook/react-native/v0.76.0/packages/react-native/ReactAndroid/cmake-utils/default-app-setup/OnLoad.cpp

Thêm include và đăng ký module vào OnLoad.cpp :

#include <NativeSampleModule.h>

// ...

std::shared_ptr<TurboModule> cxxModuleProvider(
    const std::string& name,
    const std::shared_ptr<CallInvoker>& jsInvoker) {

  if (name == NativeSampleModule::kModuleName) {
    return std::make_shared<NativeSampleModule>(jsInvoker);
  }

  return autolinking_cxxModuleProvider(name, jsInvoker);
}

Bước 5: Đăng Ký Module Trên iOS

5.1 Cài Pods & chạy Codegen

cd ios
bundle install
bundle exec pod install

5.2 Thêm folder `shared` vào project iOS

Mở file workspace Xcode: ios/SampleApp.xcworkspace

Chọn project SampleApp → chọn Add Files to "Sample App"

Chọn folder shared → Thêm vào project

5.3 Tạo ModuleProvider

Tạo class SampleNativeModuleProvider kế thừa từ NSObject , chọn ngôn ngữ Objective-C

Đổi đuôi file .m thành .mm để viết Objective-C++

File NativeSampleModuleProvider.h :

#import <Foundation/Foundation.h>
#import <ReactCommon/RCTTurboModule.h>

NS_ASSUME_NONNULL_BEGIN

@interface NativeSampleModuleProvider : NSObject <RCTModuleProvider>
@end

NS_ASSUME_NONNULL_END

File NativeSampleModuleProvider.mm :

#import "NativeSampleModuleProvider.h"
#import <ReactCommon/CallInvoker.h>
#import <ReactCommon/TurboModule.h>
#import "NativeSampleModule.h"

@implementation NativeSampleModuleProvider

- (std::shared_ptr<facebook::react::TurboModule>)getTurboModule:(const facebook::react::ObjCTurboModule::InitParams &)params {
  return std::make_shared<facebook::react::NativeSampleModule>(params.jsInvoker);
}

@end

5.4 Cập nhật `package.json` liên kết ModuleProvider

"codegenConfig": {
  "name": "AppSpecs",
  "type": "modules",
  "jsSrcsDir": "specs",
  "android": { "xxxx": "com.xxp.xx" },
  "ios": {
    "modulesProvider": {
      "NativeSampleModule": "NativeSampleModuleProvider"
    }
  }
}

Sau đó chạy lại pod để sinh mã

Bước 6: Kiểm Thử Trong JavaScript

Thêm đoạn code test trong App.tsx :

import React from 'react';
import { Button, SafeAreaView, Text, TextInput } from 'react-native';
import SampleTurboModule from './specs/NativeSampleModule';

function App() {
  const [value, setValue] = React.useState('');
  const [reversedValue, setReversedValue] = React.useState('');

  const onPress = () => {
    const revString = SampleTurboModule.reverseString(value);
    setReversedValue(revString);
  };

  return (
    <SafeAreaView>
      <Text>Enter text to reverse:</Text>
      <TextInput value={value} onChangeText={setValue} />
      <Button title="Reverse" onPress={onPress} />
      <Text>Reversed: {reversedValue}</Text>
    </SafeAreaView>
  );
}

export default App;

Kết Luận

Bạn đã hoàn thành việc tạo một Cross-Platform C++ Turbo Native Module trong React Native 0.79 với những lợi ích nổi bật:

Một codebase duy nhất cho cả Android và iOS

Hiệu năng vượt trội nhờ sử dụng C++

Tính an toàn kiểu (type-safe) nhờ Codegen

Khả năng mở rộng linh hoạt với các thư viện C++ khác

Hãy thử phát triển thêm các phương thức mới hoặc tích hợp các thư viện C++ mạnh mẽ để tận dụng tối đa tiềm năng của kiến trúc mới React Native!

🚀 Chúc bạn lập trình vui vẻ và thành công với C++ Turbo Native Modules trong React Native!

Tham Khảo

React Native Documentation: The New Architecture and Pure C++ Modules

Facebook Open Source GitHub: React Native TurboModules

Các tài liệu chính thức về CMake và Build Gradle của Android

Tài liệu CocoaPods và Objective-C++ của Apple

June 1, 2024