如何在真实设备上打开 react-native 的开发菜单

Question

我已经看到了一些边界情况和奇怪的开发人员界面。

来自"shake your device"，实在是太不实用了，特别是用平板

要模拟按钮按下。

有一致的方法吗？我们不能使用实习生 API 在我们的应用程序中有一个调试按钮来启动 navigator.popUpDevMenu() 这样的菜单吗？

如果没有，如何摇动平板电脑使其正常工作。这也是为了解决。 React native 确实改善了开发体验，但我会说特定的事情会减慢它的速度。

Answer 1

如果您使用 mac，可以使用一个名为 Frappe 的便捷工具。 https://github.com/niftylettuce/frappe

您可以从 shell

使用此命令

adb shell input keyevent 82

如果没有运行 react-native run-android 或者如果设备在运行 react-native run-android 之后断开连接。你需要re-enable the development server port。你可以运行这个命令，然后用之前的命令再试一次

adb reverse tcp:8081 tcp:8081

编辑：此解决方案仅适用于 android 设备，并且是上述问题中提出的黑客攻击之一。所以它是可以改进的。然而，在这种情况发生之前，它被选为有效答案。

Answer 2

如果你有小米 phone，给定的答案将不起作用，因为有一个安全选项阻止弹出 window 打开，你需要为你的应用程序允许它：

Go to Settings > Installed apps > [Your App Name] > Permission manager, and enable “Display pop-up window”.

Shake again. The developer menu should pop up as expected with just a little shaking.

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

Answer 3

这是我的做法：

Android:

将脚本添加到您的 package.json:

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

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

iOS

设置 -> 辅助功能 -> AssistiveTouch

打开它。
点击自定义顶级菜单...
删除除一个图标以外的所有图标，并将其设置为摇动。

这将为您提供一个按钮，您可以点击该按钮而不用摇动设备。

希望对其他人有所帮助。

Answer 4

我创建了一个库，允许您在开发模式下使用 3 根手指触摸而不是摇动打开开发菜单

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>
    );
  }
}

当你必须在真实设备上调试并且你有同事坐在你旁边时，它真的很有用。

Answer 5

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

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

Answer 6

在 Android 中摇晃 phone 有时很烦人。进行以下更改将通过按下音量调低/调高键打开开发者菜单。

在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;

Answer 7

在windows 只需点击 Metro Bundler，然后按 'D' 进入开发者菜单，'R' 重新加载

如何在真实设备上打开 react-native 的开发菜单

How do I open react-native's dev menu on real device

android

ios

reactjs

react-native

webpack-hmr