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

n8ghc7c1  于 2023-04-18  发布在  Android
关注(0)|答案(8)|浏览(164)

我已经看到了一些边界情况和奇怪的开发人员界面。
"shake your device",这是真的不切实际,特别是与平板电脑
working around Android studio来模拟按下按钮。
有没有一个一致的方法来做这件事?我们不能使用一个实习生API在我们的应用程序中有一个调试按钮来启动这样的菜单navigator.popUpDevMenu()吗?
如果没有,你如何摇动你的平板电脑来让它工作。这也是为了解决How To configure HMR on a real device问题。React native确实改善了开发体验,但我想说这个特定的东西有点慢。

sigwle7e

sigwle7e1#

如果你使用的是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设备,并且是上面问题中提出的黑客之一。因此,它是可以改进的。然而,它被选为有效答案,直到发生这种情况。

jdzmm42g

jdzmm42g2#

我是这样做的:

安卓:

将脚本添加到您的包中。json:

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

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

iOS

设置-〉辅助功能-〉辅助触摸
1.打开它。
1.点击自定义顶级菜单...
1.移除所有图标,只保留一个,并将其设置为摇动。
这将给予你一个按钮,你可以点击,而不是动摇设备。

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

zxlwwiss

zxlwwiss3#

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

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

d4so4syb4#

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

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

chhkpiq4

chhkpiq45#

在Windows上只需点击Metro Bundler并按“D”打开开发人员菜单,按“R”重新加载

r1wp621o

r1wp621o6#

如果你有一个小米手机,给定的答案将不起作用,因为有一个安全选项阻止弹出窗口打开,你需要允许它为您的应用程序:
进入设置〉已安装的应用程序〉[您的应用程序名称]〉权限管理器,并启用“显示弹出窗口”。
再次摇动。开发人员菜单应该会像预期的那样弹出,只需轻轻摇动。
来源:https://matthewphiong.com/debugging-react-native-app-on-a-xiaomi-phone

b4lqfgs4

b4lqfgs47#

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

imzjd6km

imzjd6km8#

如果它不适用于所有解决方案,请访问MainActivity.java并删除或注解掉import com.facebook.react.buildconfig

相关问题