reactjs - Electron React Native Web 键盘快捷键

Question

我正在尝试专门为react-native-web应用程序的 Electron (网络)构建添加键盘快捷键。

我确实已经在 index.electron.js 中定义了一些快捷方式作为加速器，但我希望这些新快捷方式不在菜单中，并且它们需要 react 操作/ reducer 才能执行。

我尝试将 window.onkeydown = (e) => { 添加到 App.web.js::componentDidMount 中，但这仅在运行应用程序时有效浏览器。当我构建应用程序并在 Electron 中运行它(运行 .web 版本的文件)时，我遇到了关于未定义 window 的崩溃。

我对如何向使用 React-Native for web 构建的 Electron 应用程序添加键盘快捷键/事件监听器(触发特定于 react 的代码)感到困惑。

提前谢谢

Answer 1

您应该使用 Electron API globalShortcut和 IPC将事件发送到网页。

主要流程代码

  const { globalShortcut } = require('electron')

  // this will be triggered when the accelerator is pressed
  // even if the app is in the background
  const ret = globalShortcut.register("Your_Accelerator", () => {
    yourWindow.webContents.send("shortcut", "shortcut has been pressed")
  });

  if (!ret) {
    console.log("registration failed");
  } else {
    console.log("registration succeeded");
  }

渲染器进程代码

  const { ipcRenderer } = require("electron");
  ipcRenderer.on("shortcut", (event, message) => {
    console.log(message) // Prints "shortcut has been pressed"
  })