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

Posted 2023-02-22

【中文标题】如何在真实设备上打开 react-native 开发菜单

【英文标题】：How do I open react-native's dev menu on real device

【发布时间】：2016-10-16 19:38:24

【问题描述】：

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

来自"shake your device"，这真的不切实际，尤其是平板电脑

到working around android studio 模拟按钮按下。

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

如果没有，您如何摇动平板电脑以使其正常工作。这也是为了解决How To configure HMR on a real device。 React native 确实改善了开发体验，但我想说的是，特定的事情会稍微减慢它的速度。

【参考方案1】：

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

【参考方案2】：

这是我的工作：

安卓：

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

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

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

iOS

设置 -> 辅助功能 -> AssistiveTouch

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

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

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

【参考方案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;

【讨论】：

adb shell input keyevent 82 不适用于较新的 Android 版本（不确定是哪一个），所以这是 android 的最佳解决方案，不喜欢仅为开发目的添加代码，但它还不错，似乎只有固溶。应该是选择的答案

【参考方案4】：

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

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

【讨论】：

这其实是个好主意。您也可以仅在 DEV 上添加按钮，使其仅在那时可用。

在 RN 0.66 中，该模块被移除。 NativeModules.DevSettings提供的API只有几个。

【参考方案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>
    );
  

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

【参考方案6】：

如果您使用的是 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 设备，并且是上述问题中提出的黑客攻击之一。所以是可以改进的。但是，在发生这种情况之前，它被选为有效答案。

【讨论】：

我提到了这些解决方法。不过，它们比我描绘的更精致。

Frappe 无法在 Mac 设备（ipad、iphone）上运行

此命令也适用于 Windows 10 和 Android 6 Marshmallow。

这对我不起作用。我正在使用带有 5.1.1 的小米 Redmi pro 3。 keyevent 仅显示正在运行的应用程序列表。有什么帮助吗？

你试过了吗？ github.com/facebook/react-native/issues/…

【参考方案7】：

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

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

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

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

【讨论】：

***.com/questions/51036405/… 请在该链接中回答我的问题

@Mr_Perfect 你的问题与 react-native 无关，而是 reactjs。

我想要一些回应。没有人回复。我被卡住了:(

来一个@Mr_Perfect，你打开你的问题大约一个小时:)。其实你已经有了 cmets 和一个答案。