reactnative newarchitecture cpp nativemodules

Nâng Tầm React Native 0.79: Hướng Dẫn Tạo Turbo Native Module Bằng C++ Đa Nền Tảng

Lê Lân

10/07/2025

Hướng Dẫn Tạo Turbo Native Module Đa Nền Tảng Bằng C++ Trong React Native 0.79

Mở Đầu

React Native tiếp tục phát triển mạnh mẽ, và với phiên bản 0.79, việc kết nối mã native trở nên hiệu quả hơn bao giờ hết—đặc biệt khi sử dụng Cross-Platform C++ Native Modules hay Turbo Native Modules.

Trong bài viết này, chúng ta sẽ tìm hiểu cách viết một module native bằng C++ để chia sẻ logic chung giữa Android và iOS chỉ với một lần triển khai duy nhất. Phương pháp này giúp giảm thiểu sự trùng lặp code, tối ưu hiệu suất và tận dụng sức mạnh của ngôn ngữ C++ trong các tác vụ nặng về tính toán hoặc xử lý đa phương tiện.

Nội dung bài viết sẽ tập trung vào các bước sau:

Tạo specs trong JavaScript/TypeScript

Cấu hình Codegen để tự động tạo scaffolding

Viết module native sử dụng C++

Đăng ký module trên Android và iOS

Thử nghiệm module trong JavaScript

Tại Sao Nên Dùng Cross-Platform C++?

Ưu Điểm Nổi Bật

Single Source of Truth: Viết một lần, sử dụng trên cả Android và iOS, tránh trùng lặp code Kotlin, Swift/Objective-C.

Tối Ưu Hiệu Suất: C++ cho phép truy cập hệ thống mức thấp, rất phù hợp cho các tác vụ CPU-intensive như mã hóa, xử lý chuỗi, âm thanh/video.

Tăng Tính Chia Sẻ: Module C++ có thể tái sử dụng qua nhiều nền tảng, dự án, giúp duy trì sự nhất quán.

Tận Dụng Thư Viện Mạnh Mẽ: Có thể tận dụng thư viện C++ sẵn có như OpenCV, SQLite, Boost...

Tích Hợp Chặt Chẽ Với Kiến Trúc Mới: Sử dụng TurboModules và JavaScript Interface (JSI) giúp cải thiện giao tiếp giữa JS và native, giảm overhead, tăng tốc độ.

💡 C++ Turbo Native Modules là giải pháp mang lại cả hiệu suất và tính nhất quán cao cho React Native thế hệ mới.

Bước 1: Tạo JavaScript Specs

Turbo Native Modules yêu cầu một file specs định nghĩa interface module, thường được viết bằng TypeScript.

Tạo thư mục specs ở thư mục gốc dự án.

Tạo 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

File specs phải bắt đầu bằng tiền tố Native (ví dụ NativeSampleModule.ts )

Giữ nguyên định dạng TypeScript, tránh đổi sang .js để Codegen nhận diện.

🚨 Điều này giúp Codegen tự động tạo scaffold cho module C++ dựa trên định nghĩa interface TypeScript.

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

Trong package.json , thêm cấu hình Codegen:

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

⚙️ Đảm bảo thay thế "com.yourpackagename.specs" bằng tên gói Android thực tế của bạn.

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

3.1 Tạo Thư Mục Chia Sẻ

Tạo thư mục shared cùng cấp với android và ios .

3.2 Định Nghĩa Header Module: `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

3.3 Cài Đặt Module: `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: Module định nghĩa một hàm đảo ngược chuỗi, dùng chung cho Android và iOS.

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

4.1 Thêm File `CMakeLists.txt`

Tạo file tại 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`

Thêm phần sau vào android/app/build.gradle :

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

4.3 Đăng Ký Module C++ Turbo trong Android Runtime

Tải file OnLoad.cpp :

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

Sửa file android/app/src/main/jni/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 Đặt Pods và Chạy Codegen

cd ios
bundle install
bundle exec pod install

5.2 Thêm Thư Mục Chia Sẻ Vào Dự Án iOS

Mở SampleApp.xcworkspace bằng Xcode.

Chọn project SampleApp , click chuột phải → Add Files to "Sample App"...

Chọn thư mục shared và thêm vào dự án.

5.3 Tạo ModuleProvider Objective-C++ Cho Module Native

Tạo File `NativeSampleModuleProvider.h`

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

NS_ASSUME_NONNULL_BEGIN

@interface NativeSampleModuleProvider : NSObject <RCTModuleProvider>
@end

NS_ASSUME_NONNULL_END

Tạo 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` Cho iOS

"codegenConfig": {
  "name": "AppSpecs",
  "type": "modules",
  "jsSrcsDir": "specs",
  "ios": {
    "modulesProvider": {
      "NativeSampleModule": "NativeSampleModuleProvider"
    }
  }
}

Sau đó chạy lại pod install để đảm bảo Codegen tạo các file cần thiết.

Bước 6: Thử Nghiệm Module Trong JavaScript

Cập nhật 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;

🧪 Bây giờ bạn có thể nhập một chuỗi, nhấn nút, và thấy chuỗi đó được đảo ngược với module C++ chạy nền tảng chéo.

Kết Luận

Bạn đã tạo thành công một Turbo Native Module đa nền tảng bằng C++ trong React Native 0.79. Với cách tiếp cận này, bạn có thể:

Viết một lần sử dụng cho cả Android và iOS

Tăng hiệu suất cho các tác vụ tính toán phức tạp

Đảm bảo tính nhất quán và tái sử dụng code cao hơn

🚀 Hãy thử mở rộng module bằng cách thêm nhiều phương thức hơn hoặc tích hợp các thư viện C++ bên ngoài để tận dụng tối đa sức mạnh của Turbo Native Modules!

Tham Khảo

React Native Docs - C++ for Mobile Development

Facebook Engineering Blog - React Native Turbo Modules

CMake & React Native Android Integration

CocoaPods Official Documentation - https://cocoapods.org

🎉 Chúc bạn thành công và phát triển các module native hiệu quả trong React Native!