React Native アプリをオフラインで構築する:古典的なアプローチ

パンス・ソランキ著

誰もが知っているように、React Native を学ぶ時期が来ました。ドキュメントとして開発するには 2 つの方法があります。このセクションでは、デバイスにインターネット接続がなくても、Android デバイス上で直接 Expo でアプリを作成することに重点を置いています。

インターネットに接続されたデバイスで Expo Client アプリを使用することで非常に簡単であることはわかりましたが、インターネットに問題がある場合はどうすればよいでしょうか?限られた MB を開発に使いたくありません。では、モバイルの WiFi 接続に安定性の問題がある場合、または単に昔ながらのスタイルのアプリを開発したい場合、またはその他の理由がある場合はどうすればよいでしょうか?

始めましょう。このプロセスには 3 つの小さなステップが含まれています。これは OS Windows での開発専用であり、OS Android をターゲットとしていることに注意してください。

事前セットアップ要件

ここから PC に adb ドライバーをインストールする必要があります。 。手順はこちらでもご覧いただけます。 .

プロセスが完了したら、モバイルを PC に接続します。 コマンド プロンプトを開きます そして、adb devices コマンドを実行します。 デバイスのリストの下に何らかのデバイス名が返された場合、 これでセットアップは完了です。ただし、名前が表示されない場合は、adb ドライバーを適切にインストールする必要があります。

注:モバイルの開発者向けオプションで USB デバッグをオンにする必要があります。

Play ストアから Expo Client アプリをここからインストールします。 .

React Native プロジェクトのセットアップ

こちらのドキュメントに記載されている手順に従ってください。 .

ここでは手順をコピーしているだけです。 ノード 10 以上があると仮定します。 インストールされている場合は、次のコマンドを実行します。

npm install -g expo-cli

expo init AwesomeProject

CD AwesomeProject

npm 開始

上記のコマンドにより、http://localhost:19002 でブラウザが開きます。 (自動的に開かない場合は、手動で開きます)。

ローカルホストを開くと、「トンネル準備完了」のようなメッセージが表示されます。 以下のように:

トンネルの準備ができたということは、魔法を作成する時期が来たことを意味します :)

セットアップ後の手順

次に、デバイスを接続し、別のコマンド プロンプトを開いて次のコマンドを実行します。

adb デバイス // 接続されているデバイスのデバイス名を検索します

adb -s リバース tcp:8081 tc p:8081 // これでは何も出力されません

http://localhost:19002 に移動します。 ブラウザで [Android デバイス/エミュレータで実行] をクリックします。

[Android デバイス/エミュレータで実行] をクリックすると、デバイス上で魔法が表示されます

これで、バンドルがデバイスに読み込まれていることがわかります。すべてのバンドルをロードすると、アプリはデバイス上で稼働し、ブラウザは次のようになります。

サイドバーにデバイスが表示されます

右上のボタンをクリックすると、アプリをデバッグできます。

右上のボタンをクリックすると、デバイスに渡されるデータを確認できます。

少しでもお役に立てれば幸いです。ご質問がございましたら、コメントしてください。喜んでお手伝いさせていただきます。

読んでいただきありがとうございます。

無料でコーディングを学びましょう。 freeCodeCamp のオープンソース カリキュラムは、40,000 人以上の人々が開発者としての職に就くのに役立ちました。始めましょう