React native hot reloading refreshes but not updat

问题:

I know the basics of react, and did some of my personal projects on react. Now I am starting with react-native.

So I created a new project and ran the run-android command. It did all the required processing and launched the emulator ( I am using Genymotion android emulator),

react-native init AwesomeProject
cd AwesomeProject
react-native run-android

After that in the emulator I enabled Hot reloading. Opened up the project and changed the code a bit. Then into the emulator, I pressed r (twice), it says fetching bundle. But I get the same thing. Nothing is changed. The changes are not updated.

So, I closed the terminal and again ran this same command

react-native run-android

Then... it showed the changes. I have no idea what is wrong here. I saw this post and thought it might help. But it didn't.

What am I doing wrong? I am using react-native 0.30.0, and Node v6.3.1. If it helps I am on windows 7, and running a nexus 6P as the Genymotion android emulator.

回答1:

Answering my own question. This post helped me.

Inside this file \node_modules\react-native\node_modules\node-haste\lib\FileWatcher\ index.js

1. I had to increase MAX_WAIT_TIME (mine I changed from 120000 to 360000).
2. Also had to change

This

key: '_createWatcher',
    value: function _createWatcher(rootConfig) {
      var watcher = new WatcherClass(rootConfig.dir, {
        glob: rootConfig.globs,
        dot: false
      });

      return new Promise(function (resolve, reject) {
        var rejectTimeout = setTimeout(function () {
          return reject(new Error(timeoutMessage(WatcherClass)));
        }, MAX_WAIT_TIME);

        watcher.once('ready', function () {
          clearTimeout(rejectTimeout);
          resolve(watcher);
        });
      });
    }

into

key: '_createWatcher',
    value: function _createWatcher(rootConfig) {
      var watcher = new WatcherClass(rootConfig.dir, {
        glob: rootConfig.globs,
        dot: false
      });

      return new Promise(function (resolve, reject) {

        const rejectTimeout = setTimeout(function() {
          reject(new Error([
            'Watcher took too long to load',
            'Try running `watchman version` from your terminal',
            'https://facebook.github.io/watchman/docs/troubleshooting.html',
          ].join('\n')));
        }, MAX_WAIT_TIME);

        watcher.once('ready', function () {
          clearTimeout(rejectTimeout);
          resolve(watcher);
        });
      });
    }

Now after this changes, any code changes I make, I don't even have to press R twice, it automatically changes. I hope this might help a noob like me. Thank you.

回答2:

I did 2 things

1) Change MAX_WAIT_TIME value to 360000 2) Do Ctrl+M on the Android emulator and choose "Enable hot reloading"

Now any change in code is reflected in less than a second in the emulator.