热重载在React Native Android中无法工作

Question

热重载在React Native Android中无法工作

react-nativecreate-react-native-appwatchmanhot-reload

10

我在Windows 10和Ubuntu 16.04上尝试了它。在两种情况下，热重新加载仅适用于jsx更改，而不是当我更改javascript中的变量、函数或其他内容时。已启用热重新加载，禁用实时重新加载。当我保存Visual Studio Code编辑器中的更改时，虚拟设备（android studio）会重新加载，但更改并未生效。在EXPO应用程序中的物理设备上也是如此。

首先，我没有安装watchman，导致热重新加载无法正常工作。后来安装了watchman，但热重新加载仍然无法正常工作。

我使用create-react-native-app启动了该应用程序，且未进行过eject操作。

package.json：

{
  "name": "NativeReduxSaga",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "jest-expo": "25.0.0",
    "react-native-debugger-open": "^0.3.17",
    "react-native-scripts": "1.11.1",
    "react-test-renderer": "16.2.0"
  },
  "main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
  "scripts": {
    "start": "react-native-scripts start",
    "eject": "react-native-scripts eject",
    "android": "react-native-scripts android",
    "ios": "react-native-scripts ios",
    "test": "node node_modules/jest/bin/jest.js",
    "postinstall": "rndebugger-open --expo"
  },
  "jest": {
    "preset": "jest-expo"
  },
  "dependencies": {
    "@redux-offline/redux-offline": "^2.3.2",
    "expo": "^25.0.0",
    "prop-types": "^15.6.1",
    "react": "16.2.0",
    "react-native": "0.52.0",
    "react-native-autocomplete-input": "^3.5.0",
    "react-navigation": "^1.5.2",
    "react-redux": "^5.0.7",
    "redux": "^3.7.2",
    "redux-devtools-extension": "^2.13.2",
    "redux-logger": "^3.0.6",
    "redux-observable": "^0.18.0",
    "redux-promise-middleware": "^5.0.0",
    "redux-saga": "^0.16.0",
    "redux-thunk": "^2.2.0",
    "rxjs": "^5.5.7"
  }
}

监视器版本

{
    "version": "4.9.1",
    "buildinfo": "94e66865386e844f2cffe52e355a94c96562d2e3 2018-03-12T19:58:02.0000000Z"
}

Node版本 v6.13.1

我在这里读到一些文章，说在Windows上提高MAX_WAIT_TIME可能有所帮助。但是我没有一个\node_modules\react-native\node_modules\node-haste\lib\FileWatcher\ index.js文件。

为什么Ubuntu上也不起作用呢？

我真的需要watchman吗？应该如何配置？我的.watchmanconfig文件是一个空对象{}。

使用create-react-native-app时，热重载通常是否有效？

有人知道我可以尝试什么来让热重载工作吗？感谢您的帮助！

- fricko

1

使用实时重新加载来更新变量。 - Paras Watts

好的，谢谢！所以我必须根据变量或函数的更改还是仅限于JSX和样式来在实时或热重载之间切换。 - fricko

是的，实时重载可以同时处理这两件事情。 - Paras Watts

好的，但是使用实时重新加载，整个应用程序的状态每次都会回到起点，对吧？它不会记住更改前的状态。 - fricko

是的，它重新加载所有状态。 - Paras Watts

10个回答

14

删除git index.lock 文件对我有效

rm -rf .git/index.lock

- cdvx

1

请将项目从您的计算机中删除，然后从 Git 拉取。 - hakkikonu

5

在安卓中，打开MainApplication.Java文件，在其中查找以下代码：

@Override
        public boolean getUseDeveloperSupport() {
            return true;
        }

确保它返回true。这可能是问题所在。

- Joseph Gichuru

对我来说，它返回的是 BuildConfig.DEBUG，其值为 false。现在已更改为 true。 - Mando

对我来说也是一样的，那很奇怪，BuildConfig.DEBUG 是 false。 - Amir Saadallah

1

替代方案：

  "scripts": {
-    "start": "react-native-scripts start",
+    "start": "DEBUG=true react-native-scripts start",
  },

为了使其正常工作，您应确保此文件未被更改：

// ./android/app/src/main/java/com/cubyn/storage/MainApplication.java

...
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }
...

在我看来，这是一个更好的解决方案，因为它只会在开发过程中启用，而不会在生产环境中打包。

- Aymeric Bouzy aybbyk

1

我采取了以下步骤解决了这个问题：

创建android/app/src/main/assets文件夹
运行react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
摇晃安卓设备或在模拟器中按cmd + d，你将得到一个菜单。
启用和禁用热重载。
清除调试设置中使用的IP地址 -> 调试 -> 设备的调试服务器主机和端口。
启用热重载。
在终端中进入您的项目目录 -> react-native start
运行react-native run-android或直接在Android Studio中运行它。

- Raj Kiran

在真实设备上，如果我从Metro Bundler中删除IP地址，它会抛出很多错误，说无法连接到服务器。这有什么用处吗？它根本不起作用。 - msqar

“--dev false” 会创建一个发布包，对吗？ - Mando

0

对于在使用WSL 2时遇到此问题的任何人，文件需要存在于Linux子系统内而不是任何挂载的Windows文件夹内，以使文件监视正常工作。引用自Reddit上的这篇文章：

他们改变了文件共享协议，从使用自己开发的自定义协议转向使用9P协议，目前可能不支持文件更改事件。

我相信您可以通过将代码放在Linux文件系统中（例如：在用户的主目录中），并通过WSL共享访问这些文件来解决此问题，即从Windows中的\wsl$\DISTRO_NAME访问。

在Windows资源管理器中，如果您转到\wsl$，您应该会看到所有已安装的WSL Linux发行版，并且可以访问它们文件系统中的所有文件。

- ParkerD

0

对我来说，问题出在AndroidX上，基本上有时候你需要迁移到AndroidX，因为React Native的旧版本。

只需在Android Studio中打开你的项目。

引用： 重构 -> 迁移到Android X ...并按照指示进行操作。

在升级过程中不要忽视备份以防万一。

- Sultan Ali

0

对我而言，它是通过在您的Android设备上以及相应地在您的计算机上公开8081端口来工作的：

  "scripts": {
    "start": "watchman watch-del-all && yarn run android:network && react-native start --reset-cache",
    "react:link": "react-native link",
    "android": "react-native run-android && yarn run android:network",
    "android:network": "adb reverse tcp:8081 tcp:8081 2>&1 || true",

- Oskar hertzman

-2

我认为这很简单明了

同时不要忘记在你的文本编辑器中运行npm start，而不是在类似于git bash之外的编辑器中运行。

- Yunat Amos

-3

请确保您的.git目录中没有index.lock文件 :) 删除它可能会解决您的问题。

- Nathan Simpson

这个答案与早期的答案相同。 - Lomtrur

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ajay Gupta · Accepted Answer

实际上，热重载和实时重载是有区别的。

热重载在保持应用程序状态不变的同时进行即时重新加载。但是，它只在render方法内部工作，并且仅在扩展类React.Component和Component的情况下触发。

例如：

class A extends Component ...
class B extends React.Component ...

实时重载则会重新构建您的应用程序并丢弃应用程序状态。它包括所有内容，从变量和方法到最简单的字符串。这就是为什么您始终会从应用程序的起始屏幕开始（因为状态已丢失）。

希望这可以帮助您！