React Native アプリケーションの作成

学習の目的

この単元を完了すると、次のことができるようになります。

Mobile SDK を使用して、簡単な React Native アプリケーションを作成する。
Mobile SDK が提供する React Native コンポーネントにアクセスする。
接続アプリケーション情報をアプリケーションに追加する。
Mobile SDK React Native アプリケーションを構築し、テストする。

Forcereact を使用した React Native アプリケーションの作成

次の例では、macOS X で forcereact を使用して React Native アプリケーションを作成します。forcereact は macOS X または Windows のいずれかで使用できますが、iOS React Native アプリケーションを開発できるのは macOS X のみです。

React Native アプリケーションを作成するには、ターミナルウィンドウで forcereact create を実行します。
入力を促すメッセージに対して次の値を入力します。

プラットフォーム: 1 つ以上のプラットフォームのカンマ区切りリスト。ios、android、または ios,android を指定できます。
アプリケーション種別: Press <Return>
アプリケーション名: FirstReact
パッケージ名: com.mytrail.react
組織名: MyTrail, Inc.
出力ディレクトリ: FirstReact

入力は次のようになります (無意味な構文の強調表示を除く)。

$ forcereact create
Enter the target platform(s) separated by commas (ios, android):
ios,android
Enter your application type (react_native_typescript or react_native, leave empty for react_native_typescript):
<Return>
Enter your application name:
FirstReact
Enter your package name:
com.mytrail.react
Enter your organization name (Acme, Inc.):
MyTrail, Inc.
Enter output directory for your app (leave empty for the current directory):
FirstReact

Application name (アプリケーション名)、Package name (パッケージ名)、Organization name (組織名)、Output directory (出力ディレクトリ) は、ユーザーが提示するカスタムプロパティです。

この forcereact コールで何が作成されるのでしょうか? 次の React Native アプリケーションが作成されます。

FirstReact という名前が付けられている
iOS と Android の両方をサポートする
TypeScript の使用をサポートする
Mobile SDK ライブラリを使用して構築されている
<current_directory>/FirstReact/ ディレクトリに存在する

開発マシンで forcereact アプリケーションを初めて作成するときには、React Native ライブラリのダウンロードに数分かかります。

接続アプリケーション値の設定

プロジェクト準備完了のコマンドラインメッセージが表示されたら、新しいプロジェクトを更新して、接続アプリケーション設定を反映します。

iOS

Xcode で <current_directory>/FirstReact/ios/FirstReact.xcworkspace ファイルを開きます。
プロジェクトビューで FirstReact/FirstReact/Supporting Files に移動して、bootconfig.plist ファイルを開きます。
「remoteAccessConsumerKey」と「oAuthRedirectURI」値を独自の設定で置換します。

Android

Android Studio のようこそ画面で [Import Project (Eclipse ADT, Gradle, etc.) (プロジェクトをインポート (Eclipse ADT、Gradle など))] を選択します。別のプロジェクトが Android Studio で開いている場合、[File (ファイル)] | [Open (開く)] を選択します。
<current_directory>/FirstReact/android ディレクトリを選択し、[OK] をクリックします。
プロジェクトビューで app/src/main/res/values/bootconfig.xml ファイルを開きます。
「remoteAccessConsumerKey」と「oauthRedirectURI」値を独自の設定で置換します。

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <string name="remoteAccessConsumerKey">3MVG9Iu66FKeHhINkB1l7xt7kR8czFcCTUhgoA8Ol2Ltf1eYHOU4SqQRSEitYFDUpqRWcoQ2.dBv_a1Dyu5xa</string>
   <string name="oauthRedirectURI">testsfdc:///mobilesdk/detect/oauth/done</string>
   <string-array name="oauthScopes">
       <item>api</item>
   </string-array>
   <string name="androidPushNotificationClientId"></string>
</resources>

React Native アプリケーションのビルドとテスト

React Native アプリケーションを実行するには、ターミナルアプリケーションまたは Windows コマンドラインに戻ります。

React Native アプリケーションは、ビルド時に、カスタム JavaScript コンポーネントを含むバンドルを作成します。JavaScript とネイティブコードが互いにやりとりするようにアプリケーションを実行するには、React Native 開発サーバーを起動します。

macOS のターミナルウィンドウまたは Windows のコマンドプロンプトで、アプリケーションのルートディレクトリに変更します。今回の場合、FirstReact です。
次のいずれかのコマンドを実行します。

yarn start または npm start

コマンドラインが「Loading dependency graph, done (連動関係グラフの読み込み完了)」と報告すると、開発環境からアプリケーションを実行できます。

forcereact iOS アプリケーションを起動する手順は、次のとおりです。

Xcode で FirstReact/ios/FirstReact.xcworkspace を開きます。
[実行] をクリックします。

forcereact Android アプリケーションを起動する手順は、次のとおりです。

Android Studio のようこそ画面、または [File (ファイル)] | [Open (開く)] メニュー項目で、FirstReact/android/ に移動します。
[OK] をクリックします。
[実行] をクリックします。

ログイン画面が表示されたら、Developer Edition 組織のログイン情報を入力します。応答を促されたら、アプリケーションからのデータへのアクセスを承認します。リストビュー画面が表示されます。

React Native アプリケーションリストビュー

まぶしく輝く新しい Mobile SDK React Native アプリケーションです!

JavaScript ファイルはどこに?

Xcode または Android Studio でプロジェクトを参照した場合、おそらく、React Native JavaScript とマークアップファイルの場所がどこか迷うでしょう。Xcode または Android Studio プロジェクトでは、それらを確認できません。これらの JavaScript ファイルは、iOS と Android アプリケーション間で共有可能であるため、1 つ上のレベルで作成されており、プロジェクトのビルド設定でのみ参照できます。ios/ または android/ フォルダーと同じレベルで app.tsx ファイルを探します。

Mobile SDK の React Native コンポーネント

app.js ファイルを参照すると、コードの最初の数行は Mobile SDK の特別なコンポーネントのインポートを示しています。Mobile SDK は、React Native アプリケーションが Mobile SDK 機能にアクセスできるようにする JavaScript コンポーネントを提供します。コンポーネントには次が含まれます。

react.force.oauth.ts (ログイン、ID、認証)
react.force.net.ts (REST API ヘルパークラスおよびユーティリティ)
react.force.smartstore.ts (SmartStore オフラインキャッシュ機能)
react.force.mobilesync.ts (Mobile Sync オフライン同期機能)

ハイブリッドアプリケーションで使用される Mobile SDK コンポーネントと同様に、これらのコンポーネントは JavaScript からネイティブ Mobile SDK コードへのブリッジを定義します。react-native-force ライブラリから、app.tsx ファイルにそれらをインポートします。たとえば、すべてのコンポーネントをインポートするには、次を使用します。

import {oauth, net, smartstore, mobilesync} from 'react-native-force';

アプリケーションのルートレベルの package.json ファイルの dependencies セクションにある react-native-force コンポーネントへのパスを指定します。通常、SalesforceMobileSDK-ReactNative.git リポジトリを使用します。

...
"react-native-force": "git+https://github.com/forcedotcom/SalesforceMobileSDK-ReactNative.git#v9.0.0"
...

このリポジトリをローカルで分岐した場合、このパスをローカルブランチに設定できます。

React Native で force.js ライブラリを使用することはできません。

リアルタイムテスト

ここでちょっと面白いことをしてみましょう。

テキストエディターで、アプリケーションのルートディレクトリから app.tsx ファイルを開きます。ファイル末尾付近にある、styles オブジェクトの定義を確認します。

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22,
        backgroundColor: 'white',
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },

このオブジェクトの item プロパティに、backgroundColor を 'red' に設定する行を追加します。

const styles = StyleSheet.create({
    ...
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
backgroundColor: 'red',
    }
});

iOS シミュレーターに切り替えて、Command-R キーを押します。赤い背景が表示されますか?

赤い背景の React Native アプリケーションリストビュー画面

エミュレーターまたはシミュレーターを更新するだけで、React Native JavaScript ソースに保存した変更をプレビューできます。

リソース

Mobile SDK 開発ガイド: React Native 開発

ヘルプをお探しですか?

もっと探す