👨🏿 🧀 🕰️ React Nativeを介してiOSアプリケーションを起動する方法 💻 🎰 🧘🏽

これは、Soujanya PSという仮名の下での元のブロガー記事の翻訳です。彼女はその分野の専門家であり、アプリケーションとサービスを開発するだけでなく、それに関する記事を書くことも大好きです。 React Nativeフレームワークを使用してiOSアプリケーションを起動する彼女のレビューを以下に示します。

少し前に、iOSアプリ用にReact Nativeを使い始めました。これは、ネイティブアプリケーション開発環境への私の最初の詳細です。 React Nativeのコマンドラインインターフェイスが提供する抽象化のレベルと同様に、プロセス全体の容易さに驚いたことに注意してください。実際、これがこのフレームワークについて書くきっかけとなった要因の1つでした。私は彼と仕事を始めたばかりの人たちと自分の経験を共有したいと思います。

Skillboxは 「Mobile Developer PRO」を 推奨しています 。

「Habr」の読者には、「Habr」プロモーションコードを使用してSkillboxコースに登録すると10,000ルーブルの割引があります。

React Nativeは、エミュレーターおよびデバイスでiOSおよびAndroidアプリケーションを実行するためのコマンドラインツールを提供します。 iOS用のReact Nativeアプリケーションをデプロイするために何をどのように行うかを理解してみましょう。

実際に打ち上げ

React Nativeは、initと呼ばれる優れたユーティリティを提供します。このアプリケーションのiOSフォルダーに関連するXcodeプロジェクトファイルを作成しながら、アプリケーションテンプレートを提供します。

次に、アプリケーションのルートフォルダーに次のコマンドを入力することで、iOSエミュレーターの環境と携帯電話/タブレットの両方で起動できます。

反応ネイティブrun-ios

コマンドが正常に実行されると、エミュレーターまたはデバイスでアプリケーションが起動されます。このために何をする必要があるかを説明します。

Run-iosコマンド

React Nativeは、アプリケーションと対話するためのいくつかのコマンドラインユーティリティを開発者に提供します。これらは、React Nativeモジュールノードのlocal-cliフォルダーにあります。 Run-iosは、runIOS.jsファイルで定義されているrunIOS（）関数を実行するユーティリティの1つです。

Run-iosでは、次のオプションを使用できます。

＃特定のシミュレータでアプリを起動する

react-native run-ios --simulator "iPhone 5"

#iOSディレクトリの非標準の場所を渡す

反応ネイティブrun-ios --project-path "./app/ios"

＃接続されたデバイス、たとえばMaxのiPhoneで実行

react-native run-ios --device "Max's iPhone"

＃リリースモードでアプリをビルドする

react-native run-ios --configurationリリース

デバイス/エミュレーターの選択

デバイスが指定されていない場合、run-iosはデフォルトのエミュレーターでアプリケーションのデバッグモードを起動します。これは、一連のxcrun / simctlコマンドのおかげで可能です。まず、利用可能なエミュレーターのリストを確認し、そのうちの1つを選択して、その環境にアプリケーションをロードします。

物理デバイスでアプリケーションを実行する場合は、ラップトップに接続し、run-iosで詳細を設定します。

次のステップは、Xcodeアプリケーションプロジェクトを作成することです。

アプリケーションコード

通常、React Native Xcodeアプリケーションプロジェクトは、ルートディレクトリのiOSフォルダーにあります。 Xcodeプロジェクトは、xcodebuildコマンドを使用して作成されます。 run-iosに対して以前に設定されたパラメーターは、このコマンドに渡されます。

プロジェクトが作成されると、アプリケーションがインストールされ、エミュレーターまたは接続されたデバイスに起動されます。

デバッグモードでのアプリケーションコードの追加

開発プロセス全体を通して、React Nativeはコードを動的にロードします。すべてがスムーズに進み、必要に応じてコードを使用できるようにするには、サーバーが必要です。

Xcodeプロジェクトがデバッグ中ですが、Metroサーバーはそれと並行して起動します。 React Nativeコマンドラインインターフェイスを使用して作成されたアプリケーションで使用されます。これにより、「ホット」リブートなどの方法を使用して、プロセスを高速化および簡素化できます。

デフォルトでは、Metroはポート8081でリッスンします。エミュレータでアプリケーションが起動されるとすぐに、リクエストがサーバーに送信されます。

#Code in AppDelegate.m sends the request for the bundle: #index.bundle to server jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"MobileApp initialProperties:nil launchOptions:launchOptions];

サーバーは必要なすべての依存関係をロードし、JavaScriptコードを収集してアプリケーションに送信します。このステップの後、エミュレーターまたは接続デバイスで実行中のアプリケーションを確認できます。

JavaScriptパッケージのパッケージ化

リリースモードでは、最初にJavaScriptをアプリケーションに配置してパッケージ化する必要があります。これを行うには、静的パッケージをダウンロードする機能を提供するためにいくつかの変更が必要です。 AppDelegate.mファイルのjsCodeLocationを変更して、デバッグモード外の静的パッケージの場所を示す必要があります。

 #ifdef DEBUG jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil]; #else jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"]; #endif

これは、Xcodeプロジェクトの処理中に表示されたmain.bundleリソースファイルを示していますこの段階で、react-native-xcode.shスクリプトが実行されます。 React Nativeモジュールのスクリプトフォルダーにあります。

Xcodeからアプリケーションを作成する

Xcodeプロジェクトは、React Native CLIを使用する代わりに、Macで直接作成することもできます。アプリケーションを作成したら、Xcodeオプションで選択したエミュレーターまたは物理デバイスで実行することもできます。

この資料が、react-native run-iosコマンドの実行時に実行されているプロセスを理解するのに役立つことを願っています。これにより、魔法が作成され、iOS環境でアプリケーションを実行できます。

Skillboxの推奨事項：

実践講座「職業ウェブ開発者」。
オンラインコース「Profession Frontend-developer」。
実践的な年間コース「PHP開発者からゼロまで」

React Nativeを介してiOSアプリケーションを起動する方法