用于 Web 键盘快捷键的 Electron React Native

Question

我正在尝试为 react-native-web 应用程序的电子（网络）构建添加键盘快捷键。

我确实有一些快捷方式已经在index.electron.js 中定义为加速器，但我希望这些新的快捷方式不在菜单中，它们需要反应动作/减速器才能执行。

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

我不知道如何将键盘快捷键/事件侦听器（触发特定于反应的代码）添加到使用 React-Native for web 构建的 Electron 应用程序中。

提前谢谢你

Answer 1

我不经常使用 react-native，所以我不确定仅使用框架是否可以做到这一点。 假设您使用的是npm，您只需下载一个可以支持此功能的软件包。 react-hotkeys 听起来它可以做你需要的快捷方式。

Answer 2

您应该使用 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"
  })