React Native SDK のインストール

React Native プロジェクトの作成

次のコマンドを使用して React Native プロジェクトを作成します。

npx react-native init MyApp

前のコマンドが作成したばかりのプロジェクト ディレクトリに変更します。

cd MyApp

SDK を npm でインストール

React Native プロジェクト ディレクトリで、次のコマンドを使用してプロジェクトに SDK を追加します。

npm install realm@12

Enable Hermes

SDK は、React Native のモバイル最適化された JavaScript エンジン、 ヘルムをサポートしています。 デフォルトでは、React Native CLI を使用して作成された新しいアプリでは、ヘルパーはすでに有効になっています。

SDK では preserve を使用することをお勧めします。ただし、アプリで必要な場合は、SDK でJavaScriptCore（JSC）エンジンもサポートされています。

現在 JSC を使用している既存のアプリでは、 Android とiOSで個別に preserve を有効にできます。方法については、 React Nativeドキュメントの「クエリの使用 」ガイドを参照してください。

CocoaPods の依存関係の解決

iOS アプリの場合は、React Native プロジェクト ディレクトリから次のコマンドを使用して CocoaPods 依存関係を取得します。

cd ios && pod install && cd ..

これにより、SDK ライブラリがダウンロードされ、Xcode で操作してアプリケーションを実行できるプロジェクト .xcworkspaceファイルが再生成されます。

Android Proward 構成の拡張

Android アプリで使用するには、Provid 構成を拡張する必要がある場合があります。 Prowind 構成に、以下を追加します。

-keep class io.realm.react.**

Typescriptを有効にする（推奨、ただし任意）

Typescript は、静的型チェックやその他の機能を追加し、アプリケーション規模の開発をより堅牢にするためのJavaScriptのスーパーセットです。 プロジェクトでTypescriptを使用する 場合は、 React Nativeチームの公式TypescriptとReact Nativeガイドに従ってください。SDK はTypescript をネイティブでサポートしており、 Typescriptプロジェクトに簡単に統合できます。

@realm/ Reactライブラリをインストールする

@ 邦土/ React は、クエリ、データベースへの書込み (write)、オブジェクト変更通知のリッスンなどの一般的な SDK 操作を効率化するnpmパッケージです。これにより、独自のリスナーの作成や状態マネジメントなど、単数形のコードが削減されます。

@realm/react は、さまざまなフックを持つプロバイダーのセットを介して SDK へのアクセスを提供します。 フックは、データが変更されたときに React 状態を更新します。 つまり、これらのフックを使用するコンポーネントは、データベース内のデータに対するすべての変更を再レンダリングします。

React Native プロジェクト ディレクトリで、次のコマンドを使用してプロジェクトに@realm/reactを追加します。

npm install @realm/react

アプリを実行する

React Native では、同じ React コードベースを使用する iOS と Android アプリの両方の同時開発が可能になります。 アプリを開発するには、プロジェクト ディレクトリ内の.jsまたは.tsのソースファイルを編集できます。

開発では、アプリは React ソースコードをローカル バンドル サーバーからバンドルとして読み取ります。 バンドル サーバーを実行するには、React Native プロジェクト ディレクトリで次のコマンドを使用します。

npm start

バンドル サーバーが実行中であれば、次のように Android アプリと iOS アプリを起動できるようになります。

• Android アプリを実行するには、Android Studio を使用してプロジェクト ディレクトリ内のandroidディレクトリを開き、 Runをクリックします。

• iOS アプリを実行するには、Xcode を使用してiosディレクトリ内の.xcworkspaceファイルを開きます。 セットアップ中に CocoaPods を使用しなかった場合は、代わりにiosディレクトリ内の.xcodeprojファイルを開きます。 プロジェクトを開いてから、 Runをクリックします。

React Native プロジェクトの作成

次のコマンドを使用して React Native プロジェクトを作成します。

react-native init MyApp

前のコマンドが作成したばかりのプロジェクト ディレクトリに変更します。

cd MyApp

npmを使用して SDK をインストール

React Native プロジェクト ディレクトリで、次のコマンドを使用してプロジェクトに SDK を追加します。

npm install realm@12

SDK のネイティブ モジュールのリンク

React Native プロジェクト ディレクトリで、次のコマンドを使用して SDK のネイティブ モジュールをプロジェクトにリンクします。

react-native link realm

リンク ステップの確認（Android）

Android 開発では、リンク ステップで SDK モジュールが Gradle 構成ファイルに正しく追加されたことを確認してください。 一部のバージョンでは、React Native が SDK を適切にリンクできないことが確認されています。 このような場合は、対応するファイルに以下の欠落行を追加することで、SDK を手動でリンクできます。

まず、 android/settings.gradleファイルに SDK が含まれていること、および SDK のプロジェクト ディレクトリが指定されていることを確認します。

rootProject.name = 'MyApp'
include ':realm'
project(':realm').projectDir = new File(rootProject.projectDir, '../node_modules/realm/android')
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
include ':app'

次に、 android/app/build.gradleファイルのdependenciesセクションで、SDK が依存関係として宣言されていることを確認します。

dependencies {
    implementation project(':realm')
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.facebook.react:react-native:+"  // From node_modules
    // ...
}

最後に、 MainApplication.javaファイルがRealmReactPackageをインポートし、パッケージ リストでインスタンス化することを確認します。

import io.realm.react.RealmReactPackage; // Add this import.
public class MainApplication extends Application implements ReactApplication {
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
            new MainReactPackage(),
            new RealmReactPackage() // Add this line.
        );
    }
    // ...
}

Typescript有効にする（任意）

Typescript は、静的型チェックやその他の機能を追加し、アプリケーション規模の開発をより堅牢にするためのJavaScriptのスーパーセットです。 プロジェクトでTypescriptを使用する 場合は、 React Nativeチームの公式TypescriptとReact Nativeガイドに従ってください。SDK はTypescript をネイティブでサポートしており、 Typescriptプロジェクトに簡単に統合できます。

アプリを実行する

React Native では、同じ React コードベースを使用する iOS と Android アプリの両方の同時開発が可能になります。 アプリを開発するには、プロジェクト ディレクトリ内の.jsまたは.tsのソースファイルを編集できます。

開発では、アプリは React ソースコードをローカル バンドル サーバーからバンドルとして読み取ります。 バンドル サーバーを実行するには、React Native プロジェクト ディレクトリで次のコマンドを使用します。

npm start

バンドル サーバーが実行中であれば、次のように Android アプリと iOS アプリを起動できるようになります。

• Android アプリを実行するには、Android Studioandroid を使用してプロジェクト ディレクトリ内の ディレクトリを開き、Run をクリックします。

• iOS アプリを実行するには、Xcode を使用してiosディレクトリ内の.xcworkspaceファイルを開きます。 セットアップ中に CocoaPods を使用しなかった場合は、代わりにiosディレクトリ内の.xcodeprojファイルを開きます。 プロジェクトを開いてから、 Runをクリックします。