上級編: カスタム C++ 型

注記

このガイドでは、Pure C++ Turbo ネイティブモジュールガイドを理解していることを前提としています。このガイドはその内容に基づいて説明します。

C++ Turbo ネイティブモジュールは、ほとんどの std:: 標準型に対してブリッジ機能をサポートしています。追加のコードを記述することなく、モジュールでこれらの型のほとんどを使用できます。

アプリやライブラリで新しいカスタム型をサポートする場合は、必要な ブリッジ ヘッダーファイルを提供する必要があります。

新しいカスタム型の追加: Int64

C++ Turbo ネイティブモジュールは、JavaScript が 2^53 より大きい数値をサポートしていないため、まだ int64_t 型の数値をサポートしていません。2^53 より大きい数値を表すには、JS で string 型を使用し、C++ で自動的に int64_t に変換できます。

1. ブリッジヘッダーファイルの作成

新しいカスタム型をサポートする最初のステップは、JS 表現から C++ 表現に、そして C++ 表現から JS 表現に変換するブリッジヘッダーを定義することです。

shared フォルダーに、Int64.h という名前の新しいファイルを追加します。
そのファイルに次のコードを追加します。

Int64.h
#pragma once

#include <react/bridging/Bridging.h>

namespace facebook::react {

template <>
struct Bridging<int64_t> {
  // Converts from the JS representation to the C++ representation
  static int64_t fromJs(jsi::Runtime &rt, const jsi::String &value) {
    try {
      size_t pos;
      auto str = value.utf8(rt);
      auto num = std::stoll(str, &pos);
      if (pos != str.size()) {
        throw std::invalid_argument("Invalid number"); // don't support alphanumeric strings
      }
      return num;
    } catch (const std::logic_error &e) {
      throw jsi::JSError(rt, e.what());
    }
  }

  // Converts from the C++ representation to the JS representation
  static jsi::String toJs(jsi::Runtime &rt, int64_t value) {
    return bridging::toJs(rt, std::to_string(value));
  }
};

}

カスタムブリッジヘッダーの主要なコンポーネントは次のとおりです。

カスタム型に対する Bridging 構造体の明示的な特殊化。この場合、テンプレートは int64_t 型を指定します。
JS 表現から C++ 表現に変換する fromJs 関数
C++ 表現から JS 表現に変換する toJs 関数

注記

iOS では、Int64.h ファイルを Xcode プロジェクトに追加することを忘れないでください。

2. JS 仕様の変更

次に、JS 仕様を変更して、新しい型を使用するメソッドを追加します。通常どおり、仕様には Flow または TypeScript を使用できます。

specs/NativeSampleTurbomodule を開きます。
仕様を次のように変更します。

TypeScript
Flow

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

export interface Spec extends TurboModule {
  readonly reverseString: (input: string) => string;
+  readonly cubicRoot: (input: string) => number;
}

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

NativeSampleModule.js
// @flow
import type {TurboModule} from 'react-native';
import { TurboModuleRegistry } from "react-native";

export interface Spec extends TurboModule {
  +reverseString: (input: string) => string;
+  +cubicRoot: (input: string) => number;
}

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

このファイルでは、C++ で実装する必要がある関数を定義しています.

3. ネイティブコードの実装

次に、JS 仕様で宣言した関数を実装する必要があります.

specs/NativeSampleModule.h ファイルを開き、次の変更を適用します.

NativeSampleModule.h
#pragma once

#include <AppSpecsJSI.h>
#include <memory>
#include <string>

+ #include "Int64.h"

namespace facebook::react {

class NativeSampleModule : public NativeSampleModuleCxxSpec<NativeSampleModule> {
public:
  NativeSampleModule(std::shared_ptr<CallInvoker> jsInvoker);

  std::string reverseString(jsi::Runtime& rt, std::string input);
+ int32_t cubicRoot(jsi::Runtime& rt, int64_t input);
};

} // namespace facebook::react

specs/NativeSampleModule.cpp ファイルを開き、新しい関数を実装します.

NativeSampleModule.cpp
#include "NativeSampleModule.h"
+ #include <cmath>

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());
}

+int32_t NativeSampleModule::cubicRoot(jsi::Runtime& rt, int64_t input) {
+    return std::cbrt(input);
+}

} // namespace facebook::react

実装では、数学演算を実行するために <cmath> C++ ライブラリをインポートし、<cmath> モジュールの cbrt プリミティブを使用して cubicRoot 関数を実装します。

4. アプリでのコードのテスト

これで、アプリでコードをテストできます。

まず、TurboModule から新しいメソッドを使用するように App.tsx ファイルを更新する必要があります。その後、Android と iOS でアプリをビルドできます。

App.tsx コードを開き、次の変更を適用します。

App.tsx
// ...
+ const [cubicSource, setCubicSource] = React.useState('')
+ const [cubicRoot, setCubicRoot] = React.useState(0)
  return (
    <SafeAreaView style={styles.container}>
      <View>
        <Text style={styles.title}>
          Welcome to C++ Turbo Native Module Example
        </Text>
        <Text>Write down here the text you want to revert</Text>
        <TextInput
          style={styles.textInput}
          placeholder="Write your text here"
          onChangeText={setValue}
          value={value}
        />
        <Button title="Reverse" onPress={onPress} />
        <Text>Reversed text: {reversedValue}</Text>
+        <Text>For which number do you want to compute the Cubic Root?</Text>
+        <TextInput
+          style={styles.textInput}
+          placeholder="Write your text here"
+          onChangeText={setCubicSource}
+          value={cubicSource}
+        />
+        <Button title="Get Cubic Root" onPress={() => setCubicRoot(SampleTurboModule.cubicRoot(cubicSource))} />
+        <Text>The cubic root is: {cubicRoot}</Text>
      </View>
    </SafeAreaView>
  );
}
//...

Android でアプリをテストするには、プロジェクトのルートフォルダーから yarn android を実行します。
iOS でアプリをテストするには、プロジェクトのルートフォルダーから yarn ios を実行します。

新しい構造化カスタム型の追加: Address

上記のアプローチは、あらゆる種類の型に一般化できます。構造化型の場合、React Native は JS から C++ に、またはその逆にブリッジするのを容易にするヘルパー関数をいくつか提供しています。

次のプロパティを持つカスタム Address 型をブリッジするとします。

interface Address {
  street: string;
  num: number;
  isInUS: boolean;
}

1. 仕様で型を定義する

最初のステップでは、JS 仕様で新しいカスタム型を定義して、Codegen がすべてのサポートコードを出力できるようにします。こうすることで、手動でコードを記述する必要がなくなります.

specs/NativeSampleModule ファイルを開き、次の変更を追加します。

TypeScript
Flow

NativeSampleModule (Address 型と validateAddress 関数の追加)
import {TurboModule, TurboModuleRegistry} from 'react-native';

+export type Address = {
+  street: string,
+  num: number,
+  isInUS: boolean,
+};

export interface Spec extends TurboModule {
  readonly reverseString: (input: string) => string;
+ readonly validateAddress: (input: Address) => boolean;
}

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

NativeSampleModule (Address 型と validateAddress 関数の追加)

// @flow
import type {TurboModule} from 'react-native';
import { TurboModuleRegistry } from "react-native";

+export type Address = {
+  street: string,
+  num: number,
+  isInUS: boolean,
+};


export interface Spec extends TurboModule {
  +reverseString: (input: string) => string;
+ +validateAddress: (input: Address) => boolean;
}

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

このコードは、新しい Address 型を定義し、Turbo ネイティブモジュール用に新しい validateAddress 関数を定義します。validateFunction はパラメーターとして Address オブジェクトを必要とすることに注意してください。

カスタム型を返す関数を持つことも可能です。

2. ブリッジコードを定義する

仕様で定義された Address 型から、Codegen は NativeSampleModuleAddress と NativeSampleModuleAddressBridging の 2 つのヘルパー型を生成します.

最初の型は Address の定義です。2 番目の型には、カスタム型を JS から C++ に、またはその逆にブリッジするためのすべてのインフラストラクチャが含まれています。追加する必要がある追加の手順は、NativeSampleModuleAddressBridging 型を拡張する Bridging 構造体を定義することだけです.

shared/NativeSampleModule.h ファイルを開きます
ファイルに次のコードを追加します

NativeSampleModule.h (Address 型のブリッジ)
#include "Int64.h"
#include <memory>
#include <string>

namespace facebook::react {
+  using Address = NativeSampleModuleAddress<std::string, int32_t, bool>;

+  template <>
+  struct Bridging<Address>
+      : NativeSampleModuleAddressBridging<Address> {};
  // ...
}

このコードは、汎用型 NativeSampleModuleAddress の Address タイプエイリアスを定義します。**ジェネリクスの順序は重要です**: 最初のテンプレート引数は構造体の最初のデータ型を指し、2 番目は 2 番目を指します。

次に、Codegen によって生成される NativeSampleModuleAddressBridging を拡張することにより、新しい Address 型の Bridging 特殊化を追加します.

注記

この型を生成するために従う規則があります

名前の最初の部分は常にモジュールの型です。この例では NativeSampleModule です。
名前の 2 番目の部分は常に仕様で定義された JS 型の名前です。この例では Address です。

3. ネイティブコードの実装

次に、C++ で validateAddress 関数を実装する必要があります。まず、.h ファイルに関数宣言を追加してから、.cpp ファイルで実装できます.

shared/NativeSampleModule.h ファイルを開き、関数定義を追加します

NativeSampleModule.h (validateAddress 関数のプロトタイプ)
  std::string reverseString(jsi::Runtime& rt, std::string input);

+  bool validateAddress(jsi::Runtime &rt, jsi::Object input);
};

} // namespace facebook::react

shared/NativeSampleModule.cpp ファイルを開き、関数の実装を追加します

NativeSampleModule.cpp (validateAddress の実装)
bool NativeSampleModule::validateAddress(jsi::Runtime &rt, jsi::Object input) {
  std::string street = input.getProperty(rt, "street").asString(rt).utf8(rt);
  int32_t number = input.getProperty(rt, "num").asNumber();

  return !street.empty() && number > 0;
}

実装では、Address を表すオブジェクトは jsi::Object です。このオブジェクトから値を抽出するには、JSI によって提供されるアクセサーを使用する必要があります

getProperty() は、名前でオブジェクトからプロパティを取得します.
asString() はプロパティを jsi::String に変換します.
utf8() は jsi::String を std::string に変換します.
asNumber() はプロパティを double に変換します.

オブジェクトを手動で解析したら、必要なロジックを実装できます。

注記

JSI とそのしくみの詳細については、App.JS 2024 のこの素晴らしい講演をご覧ください。

4. アプリでのコードのテスト

アプリでコードをテストするには、App.tsx ファイルを変更する必要があります。

App.tsx ファイルを開きます。App() 関数の内容を削除します.
App() 関数の本体を次のコードに置き換えます

App.tsx (App 関数本体の置換)
const [street, setStreet] = React.useState('');
const [num, setNum] = React.useState('');
const [isValidAddress, setIsValidAddress] = React.useState<
  boolean | null
>(null);

const onPress = () => {
  let houseNum = parseInt(num, 10);
  if (isNaN(houseNum)) {
    houseNum = -1;
  }
  const address = {
    street,
    num: houseNum,
    isInUS: false,
  };
  const result = SampleTurboModule.validateAddress(address);
  setIsValidAddress(result);
};

return (
  <SafeAreaView style={styles.container}>
    <View>
      <Text style={styles.title}>
        Welcome to C Turbo Native Module Example
      </Text>
      <Text>Address:</Text>
      <TextInput
        style={styles.textInput}
        placeholder="Write your address here"
        onChangeText={setStreet}
        value={street}
      />
      <Text>Number:</Text>
      <TextInput
        style={styles.textInput}
        placeholder="Write your address here"
        onChangeText={setNum}
        value={num}
      />
      <Button title="Validate" onPress={onPress} />
      {isValidAddress != null && (
        <Text>
          Your address is {isValidAddress ? 'valid' : 'not valid'}
        </Text>
      )}
    </View>
  </SafeAreaView>
);

おめでとうございます! 🎉

JSからC++への最初の型ブリッジが完了しました。

新しいカスタム型の追加: Int64​

1. ブリッジヘッダーファイルの作成​

2. JS 仕様の変更​

3. ネイティブコードの実装​

4. アプリでのコードのテスト​

新しい構造化カスタム型の追加: Address​

1. 仕様で型を定義する​

2. ブリッジコードを定義する​

3. ネイティブコードの実装​

4. アプリでのコードのテスト​

新しいカスタム型の追加: Int64

1. ブリッジヘッダーファイルの作成

2. JS 仕様の変更

3. ネイティブコードの実装

4. アプリでのコードのテスト

新しい構造化カスタム型の追加: Address

1. 仕様で型を定義する

2. ブリッジコードを定義する

3. ネイティブコードの実装

4. アプリでのコードのテスト