Docs Menu

React Native SDK のインストール

用の を使用すると、 Atlas Device SDKReact Nativeの開発が可能になりますReact Native とJavaScriptTypescript 言語を使用するアプリケーション。React Native を使用すると、 React を使用して単一のコードベースで複数のプラットフォームにまたがって iOS と Android アプリを構築できます フレームワーク。

開始する前に、開発環境が次の前提条件を満たしていることを確認してください。 これらは React Native SDK の最新バージョンに必要です。

React Native SDK は、必要最低限の React Native アプリまたはエクスポートで使用できます。 このページと React Native SDK のドキュメントでは、通常、Export ではなく、最低限の React Native アプリを使用していることを前提としています。

Express と React Native SDK を使用する場合は、「 Express でブートストラップ」のページを確認してください。

React Native バージョンに対応する以下のタブを選択します。 手順に従って、React Native プロジェクトを作成し、React Native SDK をそれに追加します。

Tip

Atlas Device SDK と Realm

SDKは、デバイス データの永続化に Realm Core データベースを使用します。 React Native SDK をインストールすると、パッケージ名には Realm の命名が反映されます。

1

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

npx react-native init MyApp

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

cd MyApp
2

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

npm install realm
3

注意

クエリを使用するには、アプリで Realm v11 以降と React Native 0.70.0 以降を使用する必要があります。

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

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

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

4

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

cd ios && pod install && cd ..

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

5

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

-keep class io.realm.react.**
6

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

7

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

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

注意

@realm/ ReactとRealm JavaScriptバージョン 11 以降を使用

RealmJavaScriptバージョン11.0.0 を使用するには またはそれ以降の @realm/React による では、@realm/react バージョン0 . .4 を使用する必要があります。0以降に更新します。

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

npm install @realm/react
8

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

注意

@realm/ Reactバージョン要件

@realm/React ライブラリにはReact ネイティブ バージョン>= 0.59 が必要です。React Native の古いバージョンを使用して開発している場合は、 @realm/reactなしで SDK を使用できます。 React Native SDK ドキュメントでは@realm/reactパッケージが頻繁に使用されているため、 Node.js SDK ドキュメントを参照することをお勧めします。

1

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

react-native init MyApp

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

cd MyApp
2

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

npm install realm
3

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

react-native link realm
4

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.
);
}
// ...
}
5

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

6

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

SDK を使用するソースファイルの先頭に次の行を追加します。

import Realm from "realm";