如何在真实设备上打开React-Native的开发菜单？

Question

我已经看到了一些边缘情况和奇怪的开发者接口。

比如“摇动设备”，这对平板电脑来说真的不实用。

还有解决 Android Studio 的问题，模拟按钮按下。

是否有一种一致的方法可以做到这一点？我们不能使用内部API在应用程序中拥有一个调试按钮，以启动navigator.popUpDevMenu()之类的菜单吗？

如果没有，那么如何摇动平板电脑以使它正常工作。这旨在解决如何在真实设备上配置HMR。React Native确实改善了开发体验，但我认为这种特定的事情会稍微减慢它的速度。

- jsdario

Answer 1

如果您使用的是Mac系统，有一个方便的工具叫做Frappe。 https://github.com/niftylettuce/frappe 您可以在命令行中使用以下命令：

adb shell input keyevent 82

如果您还没有运行react-native run-android，或者在运行react-native run-android后设备断开连接，则需要重新启用开发服务器端口。您可以运行此命令，然后再次尝试之前的命令：adb reverse tcp:8081 tcp:8081。 编辑: 此解决方案仅适用于Android设备，并且是上述问题中提出的一种hack方法。因此，它有待改进。但是，在此之前，它被选为有效答案。

- agenthunt

---

这个命令在Windows 10和Android 6 Marshmallow上也适用。 - SoundStage

"adb shell input keyevent 82" 这个帮了我很多。非常感谢！ - SUNIL GOWROJI

这对我不起作用。我正在使用5.1.1版小米红米Pro 3手机，按键事件只会带出正在运行的应用程序列表。有什么帮助吗？ - Ferry

你试过这个吗？https://github.com/facebook/react-native/issues/2754#issuecomment-140815500 - agenthunt

对我来说也一样，我的小米手机使用adb shell input keyevent 82没有任何反应 :( - ZedTuX

Answer 2

这是我的工作内容：

Android：

在您的package.json文件中添加一个脚本：

"android-shake": "adb shell input keyevent 82"

接下来，您将能够调用yarn android-shake在Android上弹出菜单（只要设备连接到计算机上）。

iOS

设置 -> 辅助功能 -> 触控辅助

1. 打开它。
2. 点击自定义顶部菜单...
3. 删除所有图标，只留一个，并将其设置为摇晃。

这将给你一个按钮，你可以点击它而不是摇晃设备。

希望这可以帮助其他人。

- Francois Nadeau

Answer 3

我在一个简单的绝对定位按钮上添加了一个 onClick 处理程序。

imoprt { NativeModules } from 'react-native';
...
onMenuButtonClick(){
 NativeModules.DevMenu.show();
}

- Sajjad Ashraf

---

这实际上是一个好主意。你还可以仅在 DEV 上添加按钮，以便仅在那时可用。 - Francois Nadeau

在 RN 0.66 版本中，该模块已被移除。现在只有 NativeModules.DevSettings 提供了一些可用的 API。 - LitileXueZha

Answer 4

我创建了一个库，允许您在开发模式下使用三根手指触摸而不是摇晃来打开开发菜单。 https://github.com/pie6k/react-native-dev-menu-on-touch 您只需要将您的应用程序包装在以下代码中：

import DevMenuOnTouch from 'react-native-dev-menu-on-touch';
// or:  import { DevMenuOnTouch } from 'react-native-dev-menu-on-touch'

class YourRootApp extends Component {
  render() {
    return (
      <DevMenuOnTouch>
        <YourApp />
      </DevMenuOnTouch>
    );
  }
}

当你需要在真实设备上进行调试，并且旁边坐着同僚时，这将非常有用。

- Adam Pietrasiak

Answer 5

在Windows上，只需单击Metro Bundler并按下'D'键打开开发人员菜单，按'R'重新加载。

- Kunal Phaltankar

---

迄今为止最简单和最简单的解决方案！这应该排在首位。 - Noah Kanyo

Answer 6

如果您使用的是小米手机，那么给出的答案将不起作用，因为有一个安全选项阻止弹出窗口打开，并且您需要允许应用程序 :

去“设置” ＞ “已安装的应用” ＞ “[您的应用名称]” ＞ “权限管理”，并启用“显示弹出窗口”。

再次摇动。开发者菜单应该会像预期的那样弹出。

来源：https://matthewphiong.com/debugging-react-native-app-on-a-xiaomi-phone

- ZedTuX

---

请在以下链接中回答我的问题：https://stackoverflow.com/questions/51036405/npm-start-not-working-in-reactjs-if-public-folder-is-inside-another-folder - Mr_Perfect

@Mr_Perfect，你的问题与React Native无关，而是与ReactJS有关。 - ZedTuX

我想得到回应，但没有人回复，我被卡住了 :( - Mr_Perfect

来吧，@Mr_Perfect，你的问题已经开了一个小时了：）。实际上，你已经有评论和答案了。 - ZedTuX

Answer 7

有时在Android上摇晃手机会很烦人。通过以下更改，您可以通过按下音量减/加键打开开发人员菜单。

请在android/../MainActivity.java中插入以下代码：

  @Override
  public boolean onKeyUp(int keyCode, KeyEvent event) {
      if (keyCode == KeyEvent.KEYCODE_VOLUME_DOWN && this.getReactInstanceManager() != null) {
          this.getReactInstanceManager().showDevOptionsDialog();
          return true;
      }
      return super.onKeyUp(keyCode, event);
  }

使用React Native Navigation V3，以下代码可在MainActivity.java中运行。

  @Override
  public boolean onKeyUp(int keyCode, KeyEvent event) {
      if (keyCode == KeyEvent.KEYCODE_VOLUME_DOWN && this.getReactGateway().getReactNativeHost().getReactInstanceManager() != null) {
          this.getReactGateway().getReactNativeHost().getReactInstanceManager().showDevOptionsDialog();
          return true;
      }
      return super.onKeyUp(keyCode, event);
  }

在此更改后，再次运行应用程序以通过react-native run-android部署上述代码。已在RN 0.59+上测试。参考：https://facebook.github.io/react-native/docs/integration-with-existing-apps。编辑：还需在文件中包含其他导入项以及KeyEvent导入。 import android.view.KeyEvent;。

- Yogesh Agrawal

---

adb shell input keyevent 82 在较新的 Android 版本上（不确定是哪个版本）无法正常工作，因此这是 Android 的最佳解决方案。虽然不喜欢仅为开发目的添加代码，但这并不太糟糕，似乎是唯一可靠的解决方案。应该选择此答案。 - Blue Bot

Answer 8

如果它不能与所有解决方案一起使用，请查看 MainActivity.java 并删除或注释掉 import com.facebook.react.buildconfig。

- om_dev