React native ERROR Packager can't listen on po

问题:

Have set up React native on my Windows box and it continually gives me this message when running react-native start:

ERROR Packager can't listen on port 8081

Ok, so I change it per instructions to:

react-native start --port=8088

This works great and I receive this:

[12/24/2016, 10:03:33 AM]         HMR Server listening on /hot
React packager ready.
[12/24/2016, 10:03:41 AM] <START> Initializing Packager
[12/24/2016, 10:03:41 AM] <START> Building in-memory fs for JavaScript
[12/24/2016, 10:03:41 AM] <END>   Building in-memory fs for JavaScript (103ms)
[12/24/2016, 10:03:41 AM] <START> Building Haste Map
[12/24/2016, 10:03:41 AM] <END>   Building Haste Map (64ms)
[12/24/2016, 10:03:41 AM] <END>   Initializing Packager (221ms)

So as instructed I then run this:

C:\ReactProjects\AwesomeProject>react-native run-android

And get this:

JS server not recognized, continuing with build...
Running C:\Users\<user>\AppData\Local\Android\sdk/platform-tools/adb -s emulator-5554 reverse tcp:8081 tcp:8081
Building and installing the app on the device (cd android && gradlew.bat installDebug)...
JS server not recognized, continuing with build...
Running C:\Users\<user>\AppData\Local\Android\sdk/platform-tools/adb -s emulator-5554 reverse tcp:8081 tcp:8081
Building and installing the app on the device (cd android && gradlew.bat installDebug)...
.
.
.
BUILD SUCCESSFUL
Total time: 19.304 secs
Starting the app on emulator-5554 (C:\Users\<user>\AppData\Local\Android\sdk/platform-tools/adb -s emulator-5554 shell am start -n com.awesomeproject/.MainActivity)...
Starting: Intent { cmp=com.awesomeproject/.MainActivity }

Sadly the emulator then gives me:

“Could not get BachedBridge, make sure your bundle is packaged correctly”

So there are instructions that state you must change the port on the emulator, but I am using the Nexus 5 running Marshmellow and cannot find that setting:

     You will also need to update your applications to load the JavaScript bundle
     from the new port. Open the in-app Developer menu, then go to Dev Settings → Debug
 server host for device and replace 8081 with your port of choice.

Anyone have an idea of how to set the emulator up to recognize the packager?

回答1:

Sadly the Rect native error messages are not that user friendly. :(

The error “Could not get BachedBridge, make sure your bundle is packaged correctly” means your device is not connected to your system.

Basically, when we start the react-native it deploy stuffs into the mobile/emulator, but when the app runs in mobile/emulator it does not know from where it need to pull code stuffs eg, assests, bundle packages etc.

So, we need to tell emulator that, boss please pick all your stuffs from blahblah server at blah blah port. We have to do exactly what you have mentioned in the question.

Open the in-app Developer menu, then go to Dev Settings → Debug server host for device

Ok so we need to achieve 2 things:

1. Open Developer menu in emulator:

   Developer menu is a modal pop up with bunch of options like, Reload, Debug JS Remotely, Enable Live Reload, Enable Hot Reload, Toggle Inspector ... , Dev Setting (this is the one we are interested in). There are number of ways to do that (mentioned below), see what works for you

   • If you are Mac user simply press CMD + M. It will open up a pop up for you
   • If you are a non Mac try CTRL + M
   • For some people pressing F2 worked. "fn + F2"
   • If you are frustrated and nothing is working try running below command in terminal (obviously while the emulator is up) Running on Device:

   adb shell input keyevent 82
   

2. Set up Dev Settings -> Debug to server host and port for device**

   After opening Developer Menu navigate to "Dev Settings -> Debug to server host and port for device".

   This place is the holy grail for solution to your problem.

   Get your machine IP address and port where you have started react-native (i.e. 8088) and enter here. It will look something like "192.168.1.105:8088". Checkout the image link here

   Click OK and reload the app (by pressing R twice or by clicking Reload in Developer Menu) and voila you are up.

回答2:

I was facing a similar issue since even my Windows laptop has McAfee installed on it. The issue was fixed for me by following the steps mentioned below :

1) Navigate to the project root and start react-native on a different port by hard-coding this value in server.js ( Please refer this answer )

react-native start

2) Now, open another instance of command prompt in the root directory and run the below commands one after the other, ( optionally you can create a bat file with the following commands and then place it at the root directory ). Please replace the port number of the emulator ( in my case 5554 ) and port number for your react-native server ( in my case 8088 ) with appropriate values.

adb -s emulator -5554 reverse tcp:8088 tcp:8088
node node_modules/react-native/local-cli/cli.js bundle --platform android --dev true --reset-cache --entry-file index.android.js --bundle-output android/app/build/intermediates/assets/debug/index.android.bundle --assets-dest android/app/build/intermediates/res/merged/debug
cd android && gradlew.bat installDebug

The node command is explained by sumit6b

3) After executing the above command, the react-native server would throw an error and stop, however, the apk file would be installed in our AVD. The name of the file would be the same as the name of our project. Open this file manually in the AVD. When the app opens, we can access Dev Settings by pressing Ctrl + M. Over here, go to Debug server host & port for device and type in localhost:8088 ( replace as needed with the appropriate port number ) and hit OK. Now, repeat steps 1 and 2 again. This time the react-native server would not terminate. Close the app opened earlier and again open the app manually in AVD. It should say "Fetching JS bundle" and the react-native server should say something like "Transforming Files"

4) At this point your react-native server and your AVD are synched. You can verify this by making some changes in index.android.js, and then douple tap R in the emulator.

5) If you still face any issues, try changing localhost with the IP address of your machine in the Debug server host & port for device settings present in AVD.

回答3:

You can use following command for run packager on another port
react-native start --port=8082

OR You can find the process which is use port 8081 by netstat -a -b -o

netstat give you PID of process. kill that process by taskkill /F /pid 8081

If you use physical device then Uninstall app before run react-native run-android