Robotjs无法使用Electron和Windows 10

Question

我正在使用电子和反应 为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

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

此外，我曾经制作了一个圆角的窗户，并遇到了一些问题，其中一些角落没有圆角，我通过使窗户自己有一个边缘来解决这个问题。发生这种情况是因为当您添加边框半径时，边框会在窗口外的显示区域外部移动，因此添加边距会将其推回。

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