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

Question

我已经看到了一些边界案例和奇怪的开发人员界面.

来自"摇动你的设备",这是非常不切实际的,特别是平板电脑

要解决Android工作室模拟按钮按下.

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

如果没有,你如何摇动平板电脑才能让它运转起来.这是为了解决如何在真实设备上配置HMR.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.您需要重新启用开发服务器端口.您可以运行此命令,然后使用上一个命令重试

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

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

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

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

Answer 5

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