web-dev-qa-db-ja.com

Expo Appからローカルにホストされているサーバーを呼び出す

反応ネイティブアプリを作成しています。作成したコンポーネントの1つに、httpリクエストからのデータを介して入力されるプロパティが含まれています。

現在、ラップトップからサーバーをホストしていますが、Expoアプリを使用して電話でアプリをテストしています。これらは2つの別個のデバイスであるため、 http：// localhost：30 呼び出しは機能せず、コンポーネントが適切に機能しているかどうかを確認できません。

ラップトップでサーバーを実行し、Expoアプリ内からのHTTPリクエストがサーバーに到達するようにセットアップする方法はありますか？

react-nativeaxiosexpo
18
iSeeJay

Expoマニフェストを使用して、実行時にIPアドレスを取得できます。

import Constants from "expo-constants";
const { manifest } = Constants;

const api = (typeof manifest.packagerOpts === `object`) && manifest.packagerOpts.dev
  ? manifest.debuggerHost.split(`:`).shift().concat(`:3000`)
  : `api.example.com`;

これにより、api定数が開発モードのローカル開発マシンのアドレスと、本番環境で使用するアドレスに設定されます。 App Store/Play Storeを通じてデプロイされたアプリには、packagerOpts undefinedがあるようです。これが、追加のtypeof条件がある理由です。その場合は、本番ビルドであると想定します。

ここでマニフェストの詳細： https://docs.expo.io/versions/latest/workflow/how-expo-works/#expo-development-server

27
Tad Lispy
import Constants from "expo-constants";

const { manifest } = Constants;

const uri = `http://${manifest.debuggerHost.split(':').shift()}:4000`;
12
tiagob

Tadeuszの答え に追加するには、Expoの現在のバージョン（今は32.0.0です）では、ConstantsではなくExpoをインポートします（定数はドキュメントではExpo.Constants.manifest）として参照されているため、次のようになります。

import { Constants } from 'expo';
const { manifest } = Constants;

また、生成されたアドレスの前にプロトコルを付けることは、それをすべて機能させるために必須のようです。

5
Alex Boklin

http://localhost:3000/アドレスをコンピューターのIPアドレスに置き換える必要があります。

Windowsでは、プロンプトを開いてipconfigと入力し、ネットワークインターフェイスの行を確認してIPV4のアドレスを取得します。192.168.1.20のようになります。次に、フェッチとhtt://192.168.1.20/routnameのようなURLで呼び出しを行うことができます。

ちなみに、コンピューター（サーバー）とデバイスは同じローカルネットワーク上にある必要があります。 Wifiとlanは同じネットワークを共有します。

3
Poptocrack

私の人生の中で、私が見つけた解決策（このページのすべてのものを含む）は機能しませんでした。数日かけて試してみました。最後に、localtunnelを使用してlocalhost:8080で実行しているサービスをWebに公開することで、この問題全体をあきらめて回避しました。私の博覧会アプリからそれを呼び出すときに最初に試してみました。長期的な解決策としては最高ではないかもしれませんが、それほど悪くはありません。これが他の誰かの役に立つことを願っています！

1
Forrest

別の簡単な方法。最初に、モバイルホットスポットをオンにし、モバイルホットスポットを使用してラップトップに接続する必要があります。次に、コンピューターにIP割り当てを確認し、api url http：// localhost：80 / addressを http://192.168.5.43:80/ に置き換えてください。使用するソース。

ポート80をAPIサーバーのポート番号に置き換えます。

ラップトップのファイアウォールでサーバーポート（80）が開いていることを確認します。

Android rest-client https://play.google.com/store/apps/details?id=com.sn.restandroidapp （url： http://192.168.5.43:80/api ）

0
Birbal Singh