使用 Electron、React Native 和 Expo 制作桌面应用程序

TL;DR： 示例。Expo + Electron 处于 alpha 阶段（2019 年 11 月）。docs = 最新信息。

本教程将向您展示如何使用 React Native、Electron、Webpack 和 Expo SDK 创建出色的桌面应用程序！

Electron 是开发桌面应用的绝佳方式，或许也是最简单的方式。许多热门应用，例如 VSCode、Figma、Zeplin等等，都是用它开发的！我喜欢把它想象成一个浏览器，并附加了一些原生功能，例如文件系统、触控栏、菜单栏、蓝牙、应用内购买等。

另一个很棒的框架是Expo，你可以用它来构建基于 React 的移动应用和网站。Web 版 Expo 的工作原理是react-native-web尽可能地利用浏览器功能，当功能不可用时，优雅地退出。🤔 但是，如果 Web 版 Expo 能够访问与原生应用相同的所有功能呢？那可能看起来就像“桌面版 Expo”😮。

🚀 教程

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

• 创建一个新的 Expo 项目expo init（如果需要，您可以从这里选择一个 TypeScript 项目🥰）
  • 您可能需要安装或更新 Expo CLInpm i -g expo-cli
  • 该项目默认已经可以在 iOS、Android 和 Web 上运行或作为 PWA 运行。
• cd进入项目并运行yarn add -D @expo/electron-adapter
  • 它包含使用 Expo 运行 Electron 所需的所有工具。
  • 请注意，它不是直接内置于 Expo CLI（树外解决方案）中。
• 现在运行yarn expo-electron以引导项目。目前执行以下操作：
  • 安装所需的依赖项：electron，，，等...@expo/webpack-configreact-native-web
  • 创建一个新的electron-webpack配置文件electron-webpack.js并将其包装在方法中withExpoAdapter，以确保一切都正确设置。
  • 将电子生成的文件附加到 .gitignore
• 最后运行yarn expo-electron start启动项目！
  • 一切都应该自动打开。
  • 您可以在终端中查看日志。
  • 在终端中使用“ctrl+c”或关闭浏览器窗口退出。
  • 对 App.tsx 进行一些修改，见证奇迹发生！🧚‍♂️

🎨自定义主流程

如果您熟悉 Electron，您可能会想“主要流程怎么样？”（但没有超链接）。

Electron 有两个过程：

• 渲染器进程：您将在此编写 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包的配置文件。 |- ||渲染器进程的入口点，除非您在 |-中更改它，但您可以将所有渲染器进程代码放在这里 |-所有静态资产、图像、字体、图标、 SVG、视频等...electron-webpack
App.tsxApp.jspackage.json
src/
assets/

⚙️ 构建你的项目

在撰写本文时（2019 年 11 月），expo/electron-adapter 尚未提供任何特殊的构建工具。但我整理了一份使用现有 Electron 软件包构建项目的指南：Expo Docs: 构建 Electron 应用

🤭 为什么选择 Electron

“为什么不直接使用像 OSX 和 react-native-windows 这样的完全原生的解决方案呢？” 原因是……为什么不两个都用呢！🥳

我们希望未来能在每个平台上提供最佳体验，但我们也非常重视用户能够自行选择技术栈。目前，您可以使用 Electron，但未来 Expo 可能会提供更出色的原生工作流程。

🧸行为

• Webpack 现在会按.electron.js&.web.js的顺序解析文件。如果你想使用 Electron 的功能，请将它们放在类似这样的文件中：foo.electron.js.
• 您安装的所有通用软件包都将自动转译，包括以以下名称开头的软件包：expo、@expo、@unimodules、@react-navigation、react-navigation、react-native。您可以通过将更多软件包添加到expo.web.build.babel.include您的 for 数组中来添加它们app.json（此功能尚处于实验阶段，可能会有所变更）。
• 我编写了文档，我只是公然地从中摘取了这一部分：]

👋 非常感谢

目前就这些了，要了解新功能，请随时在 Twitter、Github、Dev..ehh 上关注我...