React Native SDK のインストール

React Native プロジェクトの作成

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

npx react-native init MyApp

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

cd MyApp

SDK を npm でインストール

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

npm install realm

Enable Hermes

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

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

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

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ライブラリをインストールする

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

@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

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をクリックします。