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

Question

我已经看过很多边境案例和奇怪的开发人员界面。

来自"shake your device"，这是非常不切实际的，特别是平板电脑

要working around Android studio模拟按下按钮。

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

如果没有，你如何摇动平板电脑以使其正常工作。这也是为了解决How To configure HMR on a real device。 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

这是我的工作：

Android：

将脚本添加到package.json：

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

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

iOS

设置->辅助功能-> AssistiveTouch

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

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

我希望这可以帮助其他人。

Answer 3

如果您使用的是小米手机，则无法使用给定的答案，因为有一个安全选项阻止了弹出窗口的打开，您需要为您的应用允许它：

  

转到设置>已安装的应用程序> [您的应用程序名称]>权限   管理器，然后启用“显示弹出窗口”。

     

再次摇动。只需按一个即可弹出开发人员菜单   有点发抖。

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

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

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

Answer 5

在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

Answer 6

在窗户上 只需点击 Metro bundler 并按“D”进入开发者菜单，按“R”重新加载

Answer 7

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

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