React Nativeでポートを変更する方法

反応ネイティブのポートを変更する方法: 1. npm start コマンドを使用して React Native ローカル サーバーのポート番号を開始します; 2. server.js ファイルを変更します; 3. デフォルトの 8081 ポートを次のように変更します必要なポートに番号を付けるだけです。

この記事の動作環境: Windows7 システム、react17.0.1、Dell G3。

反応ネイティブでポートを変更するにはどうすればよいですか?

React Native ポートを簡単に変更する方法を教えます (複数の React Native を同時に実行する方法、8081 ポート占有問題)_fengyuzhengfan のコラム - CSDN ブログ

##待望の新クラスがオンラインで始まります！ React Native 開発への新しいアプローチを解除し、React Native の最新かつ最も人気のあるテクノロジーを入手してください。ここをクリックして入手してください!!!

• 8081 ポートがブロックされている、占有されている他のプログラム (ウイルス対策ソフトウェアなど) を使用すると、React Native は 8081 サービスを正常に開始できません。

• #複数の React Native プロジェクトを同時に実行したい場合;

• React Native のデフォルトの 8081 がどのように設定されているかに興味があり、それを変更したい場合は、

8081をリッスンします。では、このデフォルト ポートを変更するにはどうすればよいでしょうか?次に、React Native サービスのデフォルトのリスニング ポートを変更する手順に従ってください。

npm startまたはreact-native run-xxx# を通じて起動することを意味します。 ## コマンド React Native ローカル サーバーのポート番号 (図に示すように):
サーバー ポートを一時的に変更します

最新のソース コードを表示します。 ##server.js

... command: '--port [number]', default: 8081, parse: (val: string) => Number(val), ...

react-native start --port=8082

Tips: 上記のコードは2017年8月1日に提出されたプルリクエストなので、2017年8月1日以前のReact Nativeバージョンにはこの機能がありません。

サーバー ポートを永続的に変更する

server.js

server.js を変更する必要があります。場所:

你的项目名称/node_modules/react-native/local-cli/server/server.js

npm startを実行するだけです。

ステップ 2: iOS プロジェクトのポート番号を変更する
React Native サービスのポート番号を変更した後、iOS プロジェクトのポート番号を変更して、新しいポートから jsbundle を取得します。そうでない場合は、No Bundle URL present

ヒント: React Native プロジェクトに iOS モジュールがない場合は、この手順を無視できます。

React Native プロジェクトで iOS プロジェクトを開きます。 XCode 経由;

次のファイルのポート番号を変更します:

#RCTWebSocketExecutor.m

• RCTBundleURLProvider.m
• RCTInspectorDevServerHelper.mm
  • RCTPackagerConnectionBridgeConfig.m
  • これらのファイルを簡単に見つけてポート番号を見つけるには、XCode の ## を使用できます。 #検索ナビゲーターを表示
  テキストを検索する関数
  • 8081

## 次に、react を使用できます。 -native run-iosiOS プロジェクトを実行し、新しいポートから jsbundle を読み取ります。

第三步：修改Android项目的端口号

在修改了React Native 服务的端口号之后，我们要需改Android项目的端口号让它从新端口获取jsbundle，否则的话会出现No bundle URL present错误。

提示：如果你的React Native项目没有Android模块可以忽略此步骤；

• 打开调试工具(Dev Settings)，可以通过(command+M) 完成;
• 点击Debug server host & port for device，添加localhost:xxx其中xxx为新的端口地址；
  
  
• 重新reload一下，就可以从新的端口加载jsbundle了。

另外，如果你的项目是源码级依赖React Native的话，也可以通过修改AndroidInfoHelpers.java文件来完成对Android项目的端口的修改。

public class AndroidInfoHelpers { public static final String EMULATOR_LOCALHOST = "10.0.2.2"; public static final String GENYMOTION_LOCALHOST = "10.0.3.2"; public static final String DEVICE_LOCALHOST = "localhost"; private static final int DEBUG_SERVER_HOST_PORT = 8081; private static final int INSPECTOR_PROXY_PORT = 8081; ...

ログイン後にコピー

如何同时运行多个react native项目

因为端口绑定的缘故，默认情况下react native是不支持同时运行多个项目的。

如果我们要同时运行多个react native项目的话，**需要为同时运行的多个项目分配不同的端口号。**这样以来，我们就可以让react native支持同时运行多个项目了。关于如何为不同项目分配端口号，查看上文 [修改React Native监听端口](#修改React Native监听端口) 的教程即可。

如果大家对修改React Native端口还有不明白的地方,可以在文章下方给我留言，我看到了后会及时回复的哦。
另外也可以关注我的新浪微博@CrazyCodeBoy，或者关注我的Github来获取更多有关React Native开发的技术干货。

告诉大家一个好消息，为大家精心准备的React Native视频教程发布了，大家现可以看视频学React Native了。

如果，大家在开发原生模块中遇到问题可以在本文的下方进行留言，我看到了后会及时回复的哦。
另外也可以关注我的新浪微博，或者关注我的Github来获取更多有关React Native开发的技术干货。

推荐学习：《react视频教程》

以上がReact Nativeでポートを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。