React Native でモバイル アプリの構築を開始するために知っておくべきこと

JavaScript を使用してアプリを構築することほど優れたものはありません。モバイルアプリを構築している場合を除きます。 JavaScript は Web アプリを構築するためのものであり、これを使用してネイティブ モバイル アプリを構築することは以前は不可能でした。 Web 開発者にとって、ネイティブ モバイル アプリの構築に取り掛かるのは困難でした。彼らは、Java や Objective-C など、この目的のために使用されたプログラミング言語を学ばなければなりません。

つまり、Facebook の React Native がこの障壁を破るまでは。 React Native には、Android と IOS の両方のクロスプラットフォーム アプリを構築できるなど、大きな利点があります。 React Native が登場する前は、コードを 2 回 (Android 用と IOS 用に 1 つずつ) 書く必要がありました。

この記事は React Native の世界の紹介です。準備はいいですか?.

ネイティブに反応する理由

そうですよね、なぜ他のテクノロジーではなく React ネイティブなのですか?

他のテクノロジーでは実現できない多くのソリューションを提供してくれます。 React Native でできることは次のとおりです。

ネイティブ モバイル アプリの構築

React Native を使用すると、iOS と Android の両方でネイティブ アプリを JavaScript で作成できます。これにより、ジェスチャー、プッシュ通知、カメラ、位置情報など、すべてのネイティブ コンポーネントを使用できるようになります。 ionic や PhoneGap などのモバイル アプリを構築するための JavaScript ライブラリは他にもいくつかあります。しかし、これらのライブラリは Webview を使用しており、これらのテクノロジーで構築されたアプリはネイティブではありません.

クロスプラットフォーム モバイル アプリの構築 (iOS および Android)

そうです、React Native を使用すると、iOS と Android で実行できるモバイル アプリを構築できます。これは、React Native の大きな利点の 1 つです。 Facebook が作成する前は、アプリを 2 回、異なるコードでビルドする必要がありました。1 つは Swift または Objective-C を使用する iOS 用で、もう 1 つは Java または Kotlin を使用する Android 用です。 React Native はこの問題を解決したので、React Native アプリをビルドでき、iOS と Android で動作します。素晴らしい！ ?

すべてのコードを JavaScript と React で記述

React Native アプリを構築している間に、実際に JavaScript を記述します。 Reactjs コードにより、優れた UI およびユーザー エクスペリエンス コンポーネントを構築できます。

react-native を使い始める

反応ネイティブから始めるのはエキサイティングなことですが、同時に少し混乱することもあります。最初のステップはインストールです。これにはいくつかの方法があります:

expo-cli の使用:

expo-cli はコマンド ライン ツールです。 expo API と統合された React Native ボイラープレートをダウンロードしてインストールします (インストール ガイドについては、こちらを参照してください)。これは React Native アプリを構築する簡単な方法であり、React Native を使い始めたばかりの場合に推奨される方法です。

expo-cli には多くのオプションがあります。構成を行わなくても、モバイル デバイスでアプリケーションを実行およびテストできます。 QR コードをスキャンすると、アプリが expo モバイル アプリで開きます。 Appertize と呼ばれる Web インターフェースを介して、React Native で構築された他のモバイル アプリケーションをブラウザーで探索できます!

react-native-cli の使用

react-native-cli は expo-cli と同じ仕事をしますが、異なるアプローチと追加の利点があります。 react-native-cli でインストールされたアプリは、アプリで独自のネイティブ モジュールを作成するオプションと機能を提供します。ネイティブ モジュールを作成できるようにするために、アプリケーションをイジェクトする必要はありません。イジェクトにより、ネイティブ モジュールを使用したり、独自に記述したりできるようになります (ネイティブ モジュールの記述方法については、別の部分で説明します ).

異なるプラットフォームでの React Native アプリの開発は、別のプロセスです。場合によっては、特定のプラットフォームに特定の構成が必要になることがあります。たとえば、Android 用にビルドするには、Android SDK を使用する必要があるため、これがどのように機能するかを見てみましょう!

Android 用モバイル アプリの作成

Android 向けの開発を開始するには、インストールが必要な要件がいくつかあります。まず、Android SDK と Android Studio の両方をダウンロードして構成する必要があります。こちらのリンクからダウンロードできます。

Android Studio をダウンロードしたら、いくつかの API もインストールする必要があります。これを行うには、Android Studio を開き、[設定] タブをクリックすると、このウィンドウが開きます:

最初に、✔️react-native でサポートするプラットフォームを [SDK プラットフォーム] タブで確認します (例:Android 6.0 Marshmallow)。その後、SDK ツールに切り替えます。

そして Android SDK Build-Tools をチェックしてください 、 Android SDK tools 、および google play service . Android SDK Build-Tools で、すべてのプラットフォームを選択します:

• 19.0.0 から 20.0.0 まで
• 22.0.0 から 24.0.0 まで
• および 25.0.2、26.0.1 ～ 26.0.3
• 27.0.3 および 28.0.1 から 28.02

これで、SDK と Android Studio が完成しました。次のステップはエミュレーターです。エミュレーター (またはシミュレーター) は、アプリを実行してテストする必要がある場所です。さまざまな選択肢があります。

Android Studio エミュレーターを使用できます。ここでは、Android Studio で使用するエミュレーターの作成方法を確認します。正直なところ、私はそれらを使用したことはありません。代わりに Genymotion または実際のデバイスを使用します。

ジェニーモーション

Genymotion は、アプリケーションをテストするための仮想エミュレーターを提供するデスクトップ アプリケーションです。速いのでよく使います。 ?実際のデバイスに見られる機能を備えたカスタマイズされた電話を作成するオプションが提供されます。たとえば、Wifi、場所、およびカメラを有効にします。 Android Studio エミュレーターやその他のエミュレーターよりも Genymotion を使用することを強くお勧めします。

実機の使用

実際のデバイスを使用してアプリを実行およびテストすることほど良いことはありません。これは、アプリケーションが実際のデバイスでどのように見えるかを知ることができるためです。仮想デバイスでは得られない方法で、作品のリアリティを感じさせます。したがって、デバイスを使用する能力があれば、躊躇しないでください。

ここまでは Android で問題ありませんが、iOS はどうですか?

IOS 用の react-native アプリのビルド

iOS 用の React Native の実行は、Android とあまり変わらないように見えます。 Android で実行される同じ React Native アプリは、iOS でも実行できますが、いくつかの例外があります。

たとえば、iOS デバイスで実行する場合は、MacOS が必要です。 MacOS と iOS について言えば、iOS で React Native を実行するために Android 用 SDK などの追加の依存関係をダウンロードする必要はありません。

エミュレーターに関しては、Xcode には、React Native アプリのテストに使用できる優れたエミュレーターがあります。エミュレーターで使用するいくつかのトリックを示すこの投稿を確認できます。

MacOS では、iOS と Android の両方を実行できます。 Android Studio と Genymotion を MacOS に確実にインストールできます。この可能性は、Android エミュレーターのみを実行でき、iOS エミュレーターを実行できない PC には存在しません。では、あなたはラッキーですか?MacOS を持っているなら — 楽しんでください?.

これで、React Native アプリをビルドする環境が整い、すべてをインストールしましたが、React Native コードはどのように記述されるのでしょうか?とても簡単です。実際に Reactjs コードを記述します。

公式ガイドをチェックして、React Native の練習をすることができます。 「React Native YouTube Replica」を始めるには、この素晴らしい記事をお勧めします。最初の React Native アプリを作成するための手順を順を追って説明します。

わお！これまでは問題なく、react-native でコーディングしていました。 ?ただし、エラーを確認してデバッグし、コードのログを確認する必要があります。ああ、丸太だ!! が必要です デバガー！ React Native でどのようにデバッグしますか?

react-native のデバッグ

コードのデバッグは、React Native だけでなく、他のプログラミング言語でも非常に重要です。そのため、React Native コードで何が起こっているかを知る必要があります。 React Native アプリをデバッグするには、さまざまな方法があります:

Chrome devtools でデバッグ

React Native には、Chrome devtools を使用してアプリのログを表示するオプションがあります。 Chrome でデバッグし、エミュレータでデバッグ モードを有効にするには、キーボードで Ctrl+ m をクリックします。 .

この画面がポップアップします:

次に Debug Js Remotely を選択します .これにより、このアドレス https://localhost:8081/debugger-ui/ で Google Chrome のタブが開きます .これは Chrome devtools を使用するためのものですが、他のオプションはどうですか?

React-native-debugger の使用

React-native-debugger は、React Native コードをデバッグするための優れたツールです。これは、多くの利点を提供するデスクトップ アプリケーションです。 Redux devtools と React-devtools の統合が付属しています。スタイルをデバッグすることもできます。実際、これは React Native に最適なデバッガーであり、私が使用しているものです。通常、MacOS、Windows、および Linux で利用できます。インストールおよび統合ガイドを確認してください。

この時点で十分だと思います。これは、React Native を使用してモバイル アプリを構築するための完全ガイドの最初の部分です。次のパートでは、ネイティブ コンポーネント、React ネイティブ API、他のライブラリとの統合、Redux 、GraphQL などの使用方法など、より技術的なヒントや問題について掘り下げます。ですから、このメーリング リストに登録して、次のパートが公開されたときに引き続き注目してください。お時間をいただきありがとうございます。 ?

Twitterでいつでも私を見つけることができますか?