55

我已经看到了一些边界案例和奇怪的开发者界面。

来自“摇动你的设备”，这真的不切实际，特别是用平板电脑

在Android Studio 周围工作以模拟按钮按下。

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

如果没有，您如何摇动平板电脑以使其正常工作。这也是为了解决如何在真实设备上配置 HMR。React native 确实改善了开发体验，但我会说特定的东西会减慢它的速度。

4

7 回答 7

107

如果您使用的是 Mac，则有一个名为 Frappe 的便捷工具。https://github.com/niftylettuce/frappe

您可以在 shell 中使用此命令

adb shell input keyevent 82

如果还没有运行react-native run-android，或者设备在您运行react-native run-android. 您需要重新启用开发服务器端口。您可以运行此命令并使用上一个命令重试

adb reverse tcp:8081 tcp:8081

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

于 2016-06-15T18:09:26.960 回答
33

这是我所做的：

安卓：

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

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

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

iOS

设置 -> 辅助功能 -> AssistiveTouch

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

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

在此处输入图像描述

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

于 2018-11-22T18:23:40.483 回答
8

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

imoprt { NativeModules } from 'react-native';
...
onMenuButtonClick(){
 NativeModules.DevMenu.show();
}
于 2019-04-26T12:30:29.537 回答
5

我创建了一个库，允许您在开发模式下使用 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>
    );
  }
}

当您必须在真实设备上进行调试并且有同事坐在您旁边时，它非常有用。

于 2019-01-21T11:12:38.583 回答
3

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

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

再摇一摇。开发人员菜单应按预期弹出，只需轻轻晃动即可。

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

于 2018-06-26T06:29:40.360 回答
3

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

于 2019-12-30T07:04:05.603 回答
2

在 Windows 上只需单击 Metro bundler，然后按“D”进入开发者菜单，“R”重新加载

于 2021-07-19T01:51:41.913 回答