TL;DR:示例。 Expo + Electron 处于 alpha 阶段(2019 年 11 月)。文档 u003d 最新信息。

本教程将向您展示如何使用 React Native、Electron、Webpack 和 Expo SDK 创建涂料桌面应用程序!

Electron 是制作桌面应用程序的好方法,而且可能是最简单的方法。许多流行的应用程序,如 VSCode、Figma、Zeplin、和许多其他应用程序都是用它制作的!我喜欢将其视为具有额外原生功能的浏览器,例如文件系统、触控栏、菜单栏、蓝牙、应用内购买。

另一个很棒的框架是Expo,您可以使用它来使用 React 构建移动应用程序和网站。 Expo for web 的工作原理是尽可能使用带有react-native-web的浏览器功能,然后在功能不可用时优雅地失败。 🤔 但是,如果 Expo for web 可以访问与原生应用程序相同的所有功能呢?这可能看起来像“桌面博览会”😮。

🚀 教程

[](https://res.cloudinary.com/practicaldev/image/fetch/s--OigIuc70--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://thepracticaldev. s3.amazonaws.com/i/5zk0kcug6lhwontqh2p8.png)

TL;DR:这是一个示例 repo。。

• 使用expo init创建一个新的 Expo 项目(如果需要,可以从这里选择一个 TypeScript 项目🥰)

• 您可能需要使用npm i -g expo-cli安装或更新 Expo CLI

• 默认情况下,该项目已经可以在 iOS、Android 和 Web 上运行,也可以作为 PWA 运行。

• cd进入项目并运行yarn add -D @expo/electron-adapter

• 这包含了使用 Expo 运行 Electron 的所有工具。

• 请注意,它没有直接内置到 Expo CLI(树外解决方案)中。

• 现在运行yarn expo-electron来引导项目。目前,这执行以下操作:

• 安装所需依赖:electron、@expo/webpack-config、react-native-web等...

• 创建一个新的electron-webpack配置文件electron-webpack.js并将其包装在方法withExpoAdapter中,以确保一切设置正确。

• 将电子生成的文件附加到 .gitignore

• 终于运行yarn expo-electron start启动项目了!

*一切都应该自动打开。

• 您可以在终端中查看日志。

• 在终端中使用“ctrl+c”或关闭浏览器窗口退出。

• 对 App.tsx 进行一些更改,看看奇迹发生! 🧚u200d♂️

[](https://res.cloudinary.com/practicaldev/image/fetch/s--v-2j0mZz--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https:// thepracticaldev.s3.amazonaws.com/i/10hvqnjgejomngt0l7bn.png)

🎨自定义主流程

如果您熟悉 Electron,您可能想知道“主进程呢?”(但没有超链接)。

Electron 有 2 个进程:

• 渲染器进程:这是您编写 React 应用程序代码的地方。

• 主进程:将“主进程”想象为 React Native 进程中的原生代码(但仍使用 JavaScript 编写)。它几乎不知道在“渲染器进程”中运行的代码,它可以访问各种不同的功能,例如创建窗口。

📚 它是如何工作的

• 默认情况下,您的项目使用在隐藏文件夹 (node_modules/@expo/electron-adapter/...) 中运行的主进程。

• 要自定义主进程(强烈推荐),您可以运行yarn expo-electron customize,它将在您的根目录中生成一个文件夹/electron。

• 您需要重新启动 Electron 才能使这个新文件夹成为新目标。

*electron/main中的所有内容都启用了热重载 (!!),这应该让您的生活更快乐。

*electron/webpack.config.js可用于修改两个进程的 Webpack 配置(使用传递给方法的值来检测哪个是哪个)。

📂 文件结构

|-electron/

|--webpack.config.js

|--main/所有主进程代码都在这里

|---index.js主进程的入口点

|-dist/Electron 会在这里生成文件,不要直接编辑。

|-electron-webpack.js运行项目所需的包electron-webpack的配置文件。

|-App.tsx||App.js渲染器进程的入口点,除非你在package.json中更改它

|-src/不需要,但是你可以把你所有的渲染器进程代码放在这里

|-assets/所有静态资源、图像、字体、图标、SVG、视频等...

⚙️ 构建你的项目

在撰写本文时(2019 年 11 月)expo/electron-adapter 没有提供任何特殊的构建工具。但我已经整理了一份使用现有 Electron 包构建项目的指南:Expo Docs: Building Electron apps

🤭 为什么选择电子

“为什么不直接使用完全原生的解决方案,比如 OSX 和 react-native-windows?”原因是......为什么不两者兼而有之! 🥳

[](https://res.cloudinary.com/practicaldev/image/fetch/s--5iJPJ2pm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev. s3.amazonaws.com/i/w3qhkirtqmrhp2zzgiix.gif)

将来希望为每个平台提供最佳体验,但我们也非常感谢能够选择您的堆栈。所以现在你可以使用 Electron,但未来可能会有更好的由 Expo 提供的原生工作流。

🧸行为

• Webpack 现在按顺序解析扩展名为.electron.js和.web.js的文件。如果您想使用电子功能,请将它们放入foo.electron.js.之类的文件中

• 您安装的每个通用包都将被自动转译,这包括以名称开头的包:expo、@expo、@unimodules、@react-navigation、react-navigation、react-native。您可以通过将它们附加到app.json中键expo.web.build.babel.include的数组来添加更多(此功能是实验性的,可能会更改)。

• 我写的文档是我刚刚从 :] 公然取消这一部分的

👋 非常感谢

这就是现在的全部内容,要随时了解新功能,请随时在 Twitter、Github、Dev..ehh 上关注我...