reactnative newarchitecture cpp nativemodules

Chinh Phục React Native 0.79: Tạo Module C++ Đa Nền Tảng Siêu Tốc!

Lê Lân

20/08/2025

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

Mở Đầu

React Native 0.79 đánh dấu bước tiến quan trọng trong việc tích hợp mã gốc (native code) thông qua Cross-Platform C++ Native Modules. Đây là cách tiếp cận hiện đại giúp tối ưu hiệu suất và chia sẻ mã giữa Android và iOS chỉ với một lần viết.

Việc phát triển ứng dụng đa nền tảng không còn là thử thách khi bạn có thể viết logic một lần bằng C++ và chạy trên cả hai hệ điều hành lớn. Hướng dẫn này sẽ đi qua từng bước để bạn hiểu và làm chủ cách tạo và tích hợp Turbo Native Module bằng C++ hiệu quả trong React Native 0.79, giúp giảm thiểu sự trùng lặp và tăng tốc độ xử lý ứng dụng.

Nội dung chính của bài viết bao gồm:

Tạo JavaScript Spec cho module

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

Viết mã C++ chia sẻ logic giữa hai nền tảng

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

Kiểm thử module trong mã JavaScript

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

1.1 Lợi Ích Chính

Single Source of Truth: Viết logic một lần dùng chung cho cả Android và iOS, giảm thiểu lỗi và chi phí bảo trì.

Hiệu Suất Tối Ưu: C++ cung cấp khả năng tương tác hệ thống cấp thấp, rất phù hợp với các tác vụ nặng như mã hóa, xử lý chuỗi hay đa phương tiện.

Chia Sẻ Mã Tốt Hơn: Mã C++ dễ dàng tái sử dụng qua nhiều dự án hoặc đội nhóm.

Sử Dụng Thư Viện C++ Hiện Có: Có thể tận dụng các thư viện phổ biến như OpenCV, SQLite, Boost mà không cần viết lại.

Tích Hợp Tốt Với Kiến Trúc Mới Của React Native: TurboModules và JSI cho phép giao tiếp hiệu quả giữa JavaScript và C++ với độ trễ thấp.

Điểm quan trọng: C++ đóng vai trò cầu nối giữa hiệu suất cao và đa nền tảng trong React Native, giúp lập trình viên tận dụng tối đa sức mạnh CPU trong ứng dụng di động.

2. Bước 1: Tạo JavaScript Specs

2.1 Tạo Spec File

Trong thư mục chính của dự án, tạo một thư mục có tên specs . Bên trong tạo file NativeSampleModule.ts với nội dung như sau:

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

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

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

2.2 Lưu ý quan trọng

Tên file phải bắt đầu bằng Native .

Giữ nguyên định dạng TypeScript .ts để Codegen nhận diện.

Định nghĩa interface Spec chứa các phương thức module.

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

Thêm đoạn cấu hình sau vào package.json , thay thế com.yourpackagename bằng tên package app của bạn:

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

Điều này giúp Codegen biết được nơi tìm file specs và thông tin scaffold cho module native.

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

4.1 Tạo thư mục Shared

Tạo thư mục shared ở cùng cấp với android và ios để chứa mã nguồn C++ dùng chung.

4.2 Định nghĩa Header (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

4.3 Triển khai 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

Giải thích: Đây là module C++ dùng chung cho cả Android và iOS, với hàm đơn giản đảo ngược chuỗi.

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

5.1 Thêm CMakeLists.txt

File 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)

5.2 Cập nhật build.gradle

Thêm vào android/app/build.gradle dưới buildTypes :

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

5.3 Đăng ký Turbo Native Module

Tải và sửa file OnLoad.cpp (đường dẫn: 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);
}

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

6.1 Cài đặt Pod và chạy Codegen

cd ios
bundle install
bundle exec pod install

6.2 Thêm Shared Folder vào iOS Project

Mở SampleApp.xcworkspace bằng Xcode.

Chọn project rồi thêm thư mục shared vào dự án (Add Files to "SampleApp").

Đảm bảo folder hiển thị như hình minh họa.

6.3 Tạo ModuleProvider (Objective-C++)

NativeSampleModuleProvider.h

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

NS_ASSUME_NONNULL_BEGIN

@interface NativeSampleModuleProvider : NSObject <RCTModuleProvider>
@end

NS_ASSUME_NONNULL_END

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

6.4 Cập nhật package.json

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

Sau đó chạy lại pod install để cập nhật Codegen.

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

Sửa file 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;

Nhập một chuỗi vào ô và nhấn "Reverse", kết quả đảo ngược sẽ hiện ra ngay dưới.

Kết Luận

Bạn đã thành công tạo một Cross-Platform C++ Turbo Native Module với React Native 0.79. Với phương pháp này, bạn sở hữu:

Một mã nguồn duy nhất cho Android và iOS.

Hiệu suất vượt trội nhờ C++.

Type-safe nhờ tích hợp Codegen.

Hãy thử mở rộng thêm chức năng hoặc tích hợp các thư viện C++ khác để tận dụng tối đa sức mạnh.

🚀 Chúc bạn lập trình hiệu quả và sáng tạo! 🚀

Tham Khảo

React Native Docs: Pure C++ Modules

React Native 0.79 Release Notes

Facebook Open Source Github - React Native TurboModules

C++ Programming Official Documentation