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

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

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

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

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

   • プラットフォーム: 1 つ以上のプラットフォームのカンマ区切りリスト。ios、android、または ios,android を指定できます。

   • アプリケーション種別: Press <Return>
   • アプリケーション名: FirstReact

   • パッケージ名: com.mytrail.react

   • 組織名: MyTrail, Inc.

   • 出力ディレクトリ: FirstReact

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

4. $ 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 ライブラリのダウンロードに数分かかります。

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

<?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 アプリケーションを実行するには、ターミナルアプリケーションまたは Windows コマンドラインに戻ります。

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

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

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

1. forcereact iOS アプリケーションを起動する手順は、次のとおりです。
   1. Xcode で FirstReact/ios/FirstReact.xcworkspace を開きます。
   2. [実行] をクリックします。
2. forcereact Android アプリケーションを起動する手順は、次のとおりです。
   1. Android Studio のようこそ画面、または [File (ファイル)] | [Open (開く)] メニュー項目で、FirstReact/android/ に移動します。
   2. [OK] をクリックします。
   3. [実行] をクリックします。

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

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

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

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 オフライン同期機能)

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

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

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

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

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

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

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

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

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

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