メインコンテンツにスキップ

ネイティブモジュール

React Nativeアプリケーションコードは、React Nativeまたは既存のライブラリによって提供されていない、ネイティブプラットフォームAPIとやり取りする必要がある場合があります。**ターボネイティブモジュール**を使用して、統合コードを自身で記述できます。このガイドでは、それを作成する方法を紹介します。

基本的な手順は次のとおりです。

  1. 最も一般的なJavaScriptタイプアノテーション言語の1つ、FlowまたはTypeScriptを使用して、型指定されたJavaScript仕様を定義する。
  2. 仕様をネイティブ言語インターフェイスに変換するCodegenを実行するために、依存関係管理システムを構成する。
  3. 仕様を使用してアプリケーションコードを作成する。
  4. 生成されたインターフェイスを使用してネイティブプラットフォームコードを記述し、ネイティブコードをReact Nativeランタイム環境に書き込んでフックする。

これらの各ステップを実行して、ターボネイティブモジュールの例を構築します。このガイドの残りの部分では、コマンドを実行してアプリケーションを作成したと想定しています。

npx @react-native-community/cli@latest init TurboModuleExample --version 0.76.0

ネイティブ永続ストレージ​

このガイドでは、Web Storage APIの実装方法を示します。localStorage。このAPIは、プロジェクトでアプリケーションコードを記述するReactデベロッパーに関連しています。

これをモバイルで動作させるには、AndroidとiOSのAPIを使用する必要があります。

1. 型指定された仕様を宣言​

React Nativeは、Codegenと呼ばれるツールを提供します。このツールは、TypeScriptまたはFlowで記述された仕様を受け取り、AndroidとiOS用のプラットフォーム固有のコードを生成します。この仕様は、ネイティブコードとReact Native JavaScriptランタイムとの間でやり取りされるメソッドとデータ型を宣言します。ターボネイティブモジュールは、仕様、記述したネイティブコード、および仕様から生成されたCodegenインターフェイスの両方です。

仕様ファイルを作成するには

  1. アプリのルートフォルダーの内部に `specs` という名前の新しいフォルダーを作成します。
  2. `NativeLocalStorage.ts` という名前の新しいファイルを作成します。
情報

仕様で使用できる全タイプと 付録ドキュメント内で生成されるネイティブタイプをすべて確認できます。

こちらが `localStorage` 仕様の実装です。

specs/NativeLocalStorage.ts
import type {TurboModule} from 'react-native';
import {TurboModuleRegistry} from 'react-native';

export interface Spec extends TurboModule {
  setItem(value: string, key: string): void;
  getItem(key: string): string | null;
  removeItem(key: string): void;
  clear(): void;
}

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

2. 実行するように Codegen を構成する​

React Native Codegen ツールは仕様を使用して、プラットフォーム固有のインターフェースとボイラープレートを生成します。これを実行するには、Codegen は仕様を見つける場所と仕様に対して実行する内容を知る必要があります。`package.json` を更新して以下を含めます。

package.json
     "start": "react-native start",
     "test": "jest"
   },
   "codegenConfig": {
     "name": "NativeLocalStorageSpec",
     "type": "modules",
     "jsSrcsDir": "specs",
     "android": {
       "javaPackageName": "com.nativelocalstorage"
     }
   },
   "dependencies": {

Codegen のすべてが連携するようになったので、生成されたコードにフックインするようにネイティブコードを準備する必要があります。

`generateCodegenArtifactsFromSchema` Gradle タスクを使用して Codegen が実行されます。

cd android
./gradlew generateCodegenArtifactsFromSchema

BUILD SUCCESSFUL in 837ms
14 actionable tasks: 3 executed, 11 up-to-date

Android アプリケーションをビルドすると自動的に実行されます。

3. Turbo ネイティブモジュールを使用してアプリケーションコードを作成する​

`NativeLocalStorage` を使用して、永続化したいテキスト、入力フィールド、この値を更新するためのいくつかのボタンを含む修正された `App.tsx` を次に示します。

`TurboModuleRegistry` は Turbo ネイティブモジュールを取得するための 2 つのモードをサポートします。

  • Turbo ネイティブモジュールが利用できない場合に `null` を返す `get<T>(name: string): T | null`。
  • Turbo ネイティブモジュールが利用できない場合に例外をスローする `getEnforcing<T>(name: string): T`。これはモジュールが常に利用可能であると想定しています。
App.tsx
import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  Text,
  TextInput,
  Button,
} from 'react-native';

import NativeLocalStorage from './specs/NativeLocalStorage';

const EMPTY = '<empty>';

function App(): React.JSX.Element {
  const [value, setValue] = React.useState<string | null>(null);

  const [editingValue, setEditingValue] = React.useState<
    string | null
  >(null);

  React.useEffect(() => {
    const storedValue = NativeLocalStorage?.getItem('myKey');
    setValue(storedValue ?? '');
  }, []);

  function saveValue() {
    NativeLocalStorage?.setItem(editingValue ?? EMPTY, 'myKey');
    setValue(editingValue);
  }

  function clearAll() {
    NativeLocalStorage?.clear();
    setValue('');
  }

  function deleteValue() {
    NativeLocalStorage?.removeItem(editingValue ?? EMPTY);
    setValue('');
  }

  return (
    <SafeAreaView style={{flex: 1}}>
      <Text style={styles.text}>
        Current stored value is: {value ?? 'No Value'}
      </Text>
      <TextInput
        placeholder="Enter the text you want to store"
        style={styles.textInput}
        onChangeText={setEditingValue}
      />
      <Button title="Save" onPress={saveValue} />
      <Button title="Delete" onPress={deleteValue} />
      <Button title="Clear" onPress={clearAll} />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  text: {
    margin: 10,
    fontSize: 20,
  },
  textInput: {
    margin: 10,
    height: 40,
    borderColor: 'black',
    borderWidth: 1,
    paddingLeft: 5,
    paddingRight: 5,
    borderRadius: 5,
  },
});

export default App;

4. ネイティブプラットフォームコードを作成する​

すべてが準備できたので、ネイティブプラットフォームコードの作成を開始します。これは 2 つの部分で行います。

メモ

このガイドでは、新しいアーキテクチャでのみ動作する Turbo ネイティブモジュールを作成する方法を示します。新しいアーキテクチャとレガシーアーキテクチャの両方をサポートする必要がある場合、バックワード互換性ガイドを参照してください。

アプリケーションを閉じた後も `localStorage` が保持されるように、Android プラットフォームコードを作成する時が来ました。

最初のステップは、生成された `NativeLocalStorageSpec` インターフェースを実装することです。

android/app/src/main/java/com/nativelocalstorage/NativeLocalStorageModule.java
package com.nativelocalstorage;

import android.content.Context;
import android.content.SharedPreferences;
import com.nativelocalstorage.NativeLocalStorageSpec;
import com.facebook.react.bridge.ReactApplicationContext;

public class NativeLocalStorageModule extends NativeLocalStorageSpec {

  private static final String NAME = "NativeLocalStorage";

  public NativeLocalStorageModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }

  @Override
  public String getName() {
    return NAME;
  }

  @Override
  public void setItem(String value, String key) {
    SharedPreferences sharedPref = getReactApplicationContext().getSharedPreferences("my_prefs", Context.MODE_PRIVATE);
    SharedPreferences.Editor editor = sharedPref.edit();
    editor.putString(key, value);
    editor.apply();
  }

  @Override
  public String getItem(String key) {
    SharedPreferences sharedPref = getReactApplicationContext().getSharedPreferences("my_prefs", Context.MODE_PRIVATE);
    String username = sharedPref.getString(key, null);
    return username;
  }

  @Override
  public void removeItem(String key) {
    SharedPreferences sharedPref = getReactApplicationContext().getSharedPreferences("my_prefs", Context.MODE_PRIVATE);
    sharedPref.edit().remove(key).apply();
  }
}

次に、NativeLocalStoragePackageを作成する必要があります。これは Turbo Native パッケージとしてラップすることでモジュールを React Native ランタイムに登録するためのオブジェクトを提供します

android/app/src/main/java/com/nativelocalstorage/NativeLocalStoragePackage.java
package com.nativelocalstorage;

import com.facebook.react.TurboReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.module.model.ReactModuleInfo;
import com.facebook.react.module.model.ReactModuleInfoProvider;

import java.util.HashMap;
import java.util.Map;

public class NativeLocalStoragePackage extends TurboReactPackage {

  @Override
  public NativeModule getModule(String name, ReactApplicationContext reactContext) {
    if (name.equals(NativeLocalStorageModule.NAME)) {
      return new NativeLocalStorageModule(reactContext);
    } else {
      return null;
    }
  }

  @Override
  public ReactModuleInfoProvider getReactModuleInfoProvider() {
    return new ReactModuleInfoProvider() {
      @Override
      public Map<String, ReactModuleInfo> get() {
        Map<String, ReactModuleInfo> map = new HashMap<>();
        map.put(NativeLocalStorageModule.NAME, new ReactModuleInfo(
          NativeLocalStorageModule.NAME,       // name
          NativeLocalStorageModule.NAME,       // className
          false, // canOverrideExistingModule
          false, // needsEagerInit
          false, // isCXXModule
          true   // isTurboModule
        ));
        return map;
      }
    };
  }
}

最後に、このPackageを検索する方法をメインアプリケーションの React Native に指示する必要があります。これは React Native でパッケージを「登録」することと呼びます。

この場合、getPackagesメソッドで返されるように追加します。

情報

Turbo Native モジュールをnpm パッケージとして配布する方法を後ほど学習します。このビルドツールは自動的にリンクします。

android/app/src/main/java/com/turobmoduleexample/MainApplication.java
package com.inappmodule;

import android.app.Application;
import com.facebook.react.PackageList;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactHost;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint;
import com.facebook.react.defaults.DefaultReactHost;
import com.facebook.react.defaults.DefaultReactNativeHost;
import com.facebook.soloader.SoLoader;
import com.nativelocalstorage.NativeLocalStoragePackage;

import java.util.ArrayList;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost reactNativeHost = new DefaultReactNativeHost(this) {
    @Override
    public List<ReactPackage> getPackages() {
      List<ReactPackage> packages = new PackageList(this).getPackages();
      // Packages that cannot be autolinked yet can be added manually here, for example:
      // packages.add(new MyReactNativePackage());
      packages.add(new NativeLocalStoragePackage());
      return packages;
    }

    @Override
    public String getJSMainModuleName() {
      return "index";
    }

    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    public boolean isNewArchEnabled() {
      return BuildConfig.IS_NEW_ARCHITECTURE_ENABLED;
    }

    @Override
    public boolean isHermesEnabled() {
      return BuildConfig.IS_HERMES_ENABLED;
    }
  };

  @Override
  public ReactHost getReactHost() {
    return DefaultReactHost.getDefaultReactHost(getApplicationContext(), reactNativeHost);
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, false);
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
      // If you opted-in for the New Architecture, we load the native entry point for this app.
      DefaultNewArchitectureEntryPoint.load();
    }
  }
}

これで、コードを構築してエミュレーター上で実行できます

npm run android