Robotjs无法使用Electron和Windows 10

Question

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

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

在mymain.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;
}

在我的DisplayBarReact组件上：

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'
  }
};

来自西班牙的问候！

编辑

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

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

我在这个问题上找到了答案。

我仍然得到以下错误在我的开发工具控制台：

Answer 1

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

另外，我曾经做了一个圆角的窗口，遇到了一个问题，有些角落没有圆角，我通过使窗口本身有一个余量来解决这个问题。出现这种情况是因为当您添加边框半径时，边框位于窗口的外部，即显示区域之外，因此添加边距会将其推回。

希望这对你有帮助，如果你遇到任何问题，只需发表评论。