Shulou(Shulou.com)06/02 Report--

This article mainly introduces how to modify the port of react native, the article is very detailed, has a certain reference value, interested friends must read it!

React native port modification method: 1, through the npm start command to start the React Native local server port number; 2, modify the server.js file; 3, change the default port 8081 to the port number you want.

The operating environment of this paper: Windows7 system, react17.0.1, Dell G3.

When we run a React Native project, React Native starts a local service with the default port number of 8081, which is a local server for the React Native project to provide JSBundle packages and some static resources. All of this is configured by React Native for developers, and everything is so easy, but if the following happens, you need to read this article carefully:

Port 8081 is occupied by other programs (such as antivirus software), which prevents React Native from starting 8081 services normally.

If you want to run multiple React Native projects simultaneously

If you are curious about how the default 8081 of React Native is set, you would like to modify it

Modify React Native listening port

Starting the React Native service listens on port 8081 by default, so how do you modify this default port? Next, follow me step by step to modify the default listening port of the React Native service.

Step 1: modify the Server port

The so-called Server port is the port number of the React Native local server we started with the npm start or react-native run-xxx command, as shown in the figure:

Temporarily modify Server port

Looking at the source code of the latest server.js, it is not difficult to find a piece of code:

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

As you can see from the above code, we can specify a port number for the react native service when it is started:

React-native start-port=8082

Note: the above code is a pull request submitted on August 1, 2017, so the React Native version before August 1, 2017 does not have this feature.

Permanently modify Server port

To permanently change this default port number, we need to modify the server.js file, where the server.js is located, in:

Your project name / node_modules/react-native/local-cli/server/server.js

Find the file, open it, and change the default port 8081 to the port number you want:

After the modification, you need to verify whether it is in effect, and how to verify it. The method is simple: run npm start under the project root directory:

As you can see from the figure above, here we have changed the default port of react-native to 8082.

Step 2: change the port number of the iOS project

After changing the port number of the React Native service, we need to change the port number of the iOS project to get the jsbundle from the new port, otherwise there will be a No bundle URL present error.

Tip: if your React Native project does not have an iOS module, you can ignore this step.

Open the iOS project in the React Native project through XCode

Modify the port number of the following files:

RCTWebSocketExecutor.m

RCTBridgeDelegate.h

RCTBundleURLProvider.m

RCTInspectorDevServerHelper.mm

RCTPackagerConnectionBridgeConfig.m

To make it easy to find these files and navigate to the port number, you can use XCode's Show the Find navigator function to find text 8081

You can then run the iOS project through react-native run-ios and read the jsbundle from the new port.

Step 3: change the port number of the Android project

After changing the port number of the React Native service, we need to change the port number of the Android project to get the jsbundle from the new port, otherwise there will be a No bundle URL present error.

Tip: if your React Native project does not have an Android module, you can ignore this step.

Open the debugging tool (Dev Settings), and you can do it through (command+M).

Click Debug server host & port for device, and add localhost:xxx, where xxx is the new port address

Re-reload, and you can load jsbundle from the new port.

In addition, if your project is source-level dependent on React Native, you can also modify the port of the Android project by modifying the AndroidInfoHelpers.java file.

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;

The above is all the contents of the article "how to modify the Port of react native". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.