Robotjs 无法使用 Electron 和 Windows 10

Question

我正在使用 Electron 和 React 开发适用于 Mac OSX 和 Windows 的应用。我们的设计师团队希望应用程序具有圆形边框。他们想要或多或少像这样的东西：

我正在使用以下在 Mac 上运行良好的代码

在我的main.dev.js：

mainWindow = new BrowserWindow({
    show: false,
    width: 1024,
    height: 728,
    hasShadow: false,
    frame: false, // Important!
    transparent: true // Important!
  });

在我的app.global.css：

body {
  position: relative;
  height: 100vh;
  font-family: Arial, Helvetica, Helvetica Neue, serif;
  overflow-y: hidden;
  background-color:rgba(0,0,0,0); /* Important! */
  -webkit-app-region: drag;
}

在我的DisplayBar React 组件上：

class DisplayBar extends React.Component {
  render() {
    return (
      <div style={styles.container}>
        {this.props.children}
      </div>);
  }
}

const styles = {
  container: {
    backgroundColor: '#333333',
    borderRadius: 40, // Important!
    display: 'flex',
    height: '100%',
    border: '2px solid white',
    alignItems: 'center',
    justifyContent: 'flex-end'
  }
};

正如我所说，它在 Mac 上运行良好，但在 Windows 上它什么也不显示，只是一个透明屏幕。你知道这个问题的任何解决方案吗？

PS：来自西班牙的问候！

编辑

我发现我有一些缺少依赖项的问题，我运行了以下命令：

npm install --global --production windows-build-tools

我在 this question 上找到它。

我的开发工具控制台上仍然出现以下错误：

Answer 1

Iv 查看了您的代码，除了您将背景设置为黑色 (0, 0, 0) 但您将不透明度设置为 0 的 CSS 之外，一切看起来都很好，所以当您显示窗口时它就在那里，但背景是“不可见”，因为没有什么可显示的。

另外，我曾经制作了一个圆角的窗口，但遇到了一些角不圆的问题，我通过让窗口自身有一个边距来解决这个问题。发生这种情况是因为当您添加边框半径时，边框会在窗口的外部超出显示区域，因此添加边距会将其推回。

希望这对您有所帮助，如果您遇到任何问题，请发表评论。