React Native 0.47.1: Горячая перезагрузка не отражает изменения кода в MacOS

Я пытаюсь получить горячую перезагрузку с моим проектом React Native. Упаковщик показывает сообщение Bundling index.ios.js ... [hmr enabled], и когда я делаю изменения, я вижу сообщение Hot reloading... на устройстве, поэтому я уверен, что это изменение обнаружено. Однако фактический экран не отражает изменения кода. Живая перезагрузка отлично работает.

Я переустановил модули node и reset/uninstalled/reinstalled watchman. Ничто, кажется, не имеет никакого эффекта.

Что еще я должен попробовать? Как я могу понять, почему экран не обновляется?

Ответ 1

Текущая версия hmr в react-native работает только для компонентов, которые простираются от React.Component или Component [см.]. Другими словами, он не работает для функциональных компонентов или компонентов, которые расширяют другой базовый класс.

  • Для функциональных компонентов вы можете использовать babel-plugin-functional-hmr.
  • Если у вас есть собственный базовый класс, вы можете переопределить плагин react-transform в .babelrc следующим образом:

    {
      "presets": ["react-native"],
      "env": {
        "development": {
          "plugins": [
            ["react-transform",
              {
                "transforms": [{
                  "transform": "react-transform-hmr",
                  "imports": ["react"],
                  "locals": ["module"]
                }],
                "superClasses": ["CustomComponent", "React.Component", "Component"]
              }
            ]
          ]
        }
      }
    }