桌面应用前端UI组件【免费下载链接】proton-nativeA React environment for cross platform desktop apps项目地址https://gitcode.com/gh_mirrors/pr/proton-native点击查看免费下载本指南基于 docs/quickstart.md 编写带你从零开始安装 Proton Native、初始化第一个桌面应用并跑起带热重载的开发流程。读完你将掌握proton-native-cli的完整使用方式、AppRegistry入口约定、npm run start/npm run dev的区别以及热重载背后的 webpack 与 react-proxy 原理。Proton Native 是一个面向跨平台桌面应用的 React 环境仓库项目描述为 A React environment for cross platform desktop apps它使用与 React Native 相同的语法和组件通过 Qt 渲染原生窗口无需 Electron 也能构建桌面 GUI。本仓库当前为 V2 版本见 package.json 中version: 2.0.5V2 是一次彻底重写引入了 flexbox 布局基于 yoga-layout、CSS 样式、热重载与proton-native-cli管理工具详见 docs/v2_changes.md。环境要求与版本前提在开始安装之前先确认你的开发环境满足以下条件尤其是 macOS 用户的 Node.js 版本问题——这是快速上手阶段最常遇到的坑。Node.js 版本注意事项macOS原文档开篇特别强调在 macOS 上Proton Native 在 Node 版本高于 12.13.1 以及高于 13.0.1 时无法正常工作。根因是 Node.js 依赖的 libuv 存在一个 bug即 libuv 仓库的 issue #2593并已被报告到 Node.js 主仓库的 issue #31328该问题在撰写本指南时仍未修复。因此在官方修复之前建议在 macOS 上使用低于这些版本的 Node.js使用12.x 系列请安装12.13.1或更低的版本使用13.x 系列请安装13.0.1或更低的版本。这类版本很容易通过版本管理工具安装例如使用nvmnvm install 12.13.1 nvm use 12.13.1注意这一限制是 macOS 特有的libuv 相关 bug 在该平台触发。其他平台的版本要求相对宽松——V2 为 NAPI 2、3、4 三个版本编译了预构建二进制覆盖 Linux、Mac、Windows 上的主流 Node.js 版本见 docs/v2_changes.md 的「Difficult Installation」一节。Linux安装 Qt 开发包在 Linux 平台上需要预先安装 Qt 的开发包才能正常运行 Proton Native 应用# Debian / Ubuntu 系列 sudo apt-get install qtbase5-dev这是唯一列出的系统级前置依赖。Proton Native 的 Qt 后端正是通过node-qt-napi一个为 Proton Native 定制的 Node.js Qt 绑定来创建窗口与控件详见仓库 src/backends/index.ts 的后端抽象与 src/components/Window.ts 的窗口组件实现。qtbase5-dev提供运行时所需的 Qt 动态库缺失时应用启动阶段会直接失败。安装与初始化项目自动方式一行命令创建项目推荐原文档给出的标准安装流程使用npx直接调用 CLI无需先全局安装任何东西# 通过 cli 应用创建项目 npx proton-native-cli init my-app # 进入项目目录 cd my-app # 运行你的应用 npm run start # 或者使用热重载模式运行 npm run devnpx proton-native-cli init my-app会创建一个名为my-app的完整可运行项目其中已经内置了 Babel 编译、webpack 打包和热重载所需的一切配置。备用方式全局安装 CLI如果你更习惯全局工具docs/v2_changes.md 的「To get started」一节还提供了等价的全局安装方式# 全局安装 cli 应用 npm install -g proton-native-cli # 创建项目命令变为直接调用 proton-native proton-native init my-app # 进入项目目录 cd my-app # 运行你的应用 npm run start # 或者使用热重载模式运行 npm run dev两种方式生成的项目骨架完全一致按个人习惯选择其一即可。初始化后的项目结构以仓库自带的 examples/Calculator 为例一个典型的 Proton Native 项目包含my-app/ ├── index.js # 入口文件注册根组件 热重载接收逻辑 ├── app.js # 业务组件默认导出你的根组件 ├── webpack.config.js # webpack 配置打包 开发模式热重载 └── package.json # 依赖与 npm scripts其中package.json的 scripts 与示例仓库一致{ scripts: { start: babel-node index.js, dev: webpack --modedevelopment, webpackRun: babel-node dist/index.out.js, build: babel index.js -d bin/ } }start直接用babel-node运行index.js适合简单启动dev用 webpack 开发模式打包并监听文件变化启动热重载webpackRun由 webpack 构建完成后自动调用用于拉起打包产物。运行你的应用start 与 dev 的区别这是快速上手最核心的两个命令理解它们的行为差异能帮你避免改了代码没反应的困惑。npm run start普通启动npm run start等价于执行babel-node index.js直接解释执行你的入口文件。它不包含任何文件监听与热重载能力适合正式验证一个完整功能或简单跑通流程。npm run dev带热重载的开发模式npm run dev等价于执行webpack --modedevelopment它以index.js为入口见 examples/Calculator/webpack.config.js 中的entry: [./index.js]开启watch: true监听源码变化并注入HotModuleReplacementPlugin与webpack/hot/poll?100热更新入口每次构建完成afterEmit钩子后自动执行npm run webpackRun即babel-node dist/index.out.js拉起应用进程生成dist/index.out.js单文件产物。代码改动后webpack 增量构建并把更新推送给运行中的应用界面即时刷新且不丢失状态。关于热重载的详细机制见下文「热重载工作原理」一节。理解应用入口AppRegistry 约定所有 Proton Native 应用都遵循在app.js中定义组件、在index.js中注册组件的约定。以 examples/Calculator/index.js 为例import React from react; import { AppRegistry } from proton-native; import Calculator from ./app; // 注册根组件并渲染 AppRegistry.registerComponent(calculator, Calculator /); // // 以下为热重载逻辑生产构建时会被 webpack 剥离 // 此部分不应修改 if (module.hot) { module.hot.accept([./app], function() { const app require(./app)[default]; AppRegistry.updateProxy(app); }); }而你的根组件如 examples/Calculator/app.js从proton-native引入App、Window、View、Text、TouchableOpacity等组件构建出完整的窗口 UI并作为默认导出暴露给index.js。AppRegistry 的底层实现AppRegistry来自 src/render/index.ts其核心逻辑是const AppRegistry { registerComponent: (name: string, component: React.ComponentType) { const newComponent process.env.NODE_ENV production ? component : hot(component); connectDevtools(DesktopRenderer); ROOT_NODE createElement(ROOT, {}); container DesktopRenderer.createContainer(ROOT_NODE); DesktopRenderer.updateContainer(newComponent, container, null); }, updateProxy: (app: any) { if (container) { hot(app); container._reactInternalInstance container.current; deepForceUpdate(container); } } };从中可以看到几个关键事实registerComponent(name, component)接收组件实例而非组件类通过react-reconciler的createContainer/updateContainer创建并挂载整个 React 树当NODE_ENV为production时组件不会被hot()包装即生产模式下自动禁用热重载updateProxy(app)在收到模块更新通知后被调用借助react-proxy保留旧状态并强制更新整棵组件树deepForceUpdate。AppRegistry与全部组件Window、View、App、Text、TextInput、Image、Button、Picker等统一从包入口 src/index.ts 导出这也正是示例代码import { AppRegistry, Window, ... } from proton-native的对应关系。热重载工作原理热重载能力在proton-native-cli生成的项目中开箱即用详见 docs/hot_reloading.md。它的整体链路是webpack 监听 → 推送更新 → react-proxy 保状态刷新项目自带的 webpack.config.js 把所有代码打包成dist/index.out.js单文件并开启文件监听变更信息通过module.hotwebpack HMR传递给你的index.jsindex.js收到更新后用AppRegistry.updateProxy(app)拉取最新组件版本react-proxy仅在开发模式启用让组件状态保持不变同时用react-deep-force-update强制刷新整棵 React 树。配置层面开发模式的差异全部集中在 examples/Calculator/webpack.config.js 的这段逻辑中if (argv.mode development) { config.mode development; config.plugins.push(new webpack.HotModuleReplacementPlugin()); config.devtool source-map; config.watch true; config.stats errors-only; config.entry.unshift(webpack/hot/poll?100); }即开发模式额外启用 HMR 插件、轮询热更新入口与源码地图并通过nodeExternals将webpack/hot/dev-server等模块加入白名单确保它们在打包产物中保持可用。热重载的注意事项Gotchas原文档列出了几项实践约束违反它们会导致热重载异常不要在app.js中注册组件注册动作只应出现在index.js确保根组件是app.js的默认导出export default因为热更新回调通过require(./app)[default]获取组件当前版本的热重载暂不兼容 Redux不兼容 class 实例属性受限于react-proxy。规避方式是改为用函数返回该值——examples/Calculator/app.js 中getButtons()方法的注释正是这一约束的实践佐证this cant be an instance variable or else it wont get hot reloaded这里不能使用实例变量否则无法热重载。常见问题排查macOS 上应用无法启动请先检查 Node 版本是否高于 12.13.1 / 13.0.1若高于则用nvm降级后再试Linux 上启动报 Qt 相关错误确认已安装qtbase5-devsudo apt-get install qtbase5-devnpm run dev后界面没有刷新确认改动的是app.js且根组件是默认导出同时确认组件注册只存在于index.js想禁用热重载将NODE_ENV设置为production即可registerComponent内部据此跳过hot()包装。进一步学习docs/v2_changes.mdV2 完整改版说明包括 Qt 选型、yoga flexbox、样式系统与安装方式演进docs/hot_reloading.md热重载的官方文档与全部 Gotchasexamples/Calculator仿 iOS 计算器完整示例包含组件拆分、样式与状态管理examples/CatApi集成 Redux node-fetch的完整应用示例docs/components/Window.md 与 docs/components/View.md核心组件 API 参考src/render/index.ts 与 src/index.ts入口注册与组件导出的源码实现。至此你已经完成了从环境检查、项目初始化、命令启动到热重载原理的完整入门闭环。接下来就可以仿照examples/中的项目用你熟悉的 React 语法开始编写自己的跨平台桌面应用了。赞分享桌面应用前端UI组件【免费下载链接】proton-nativeA React environment for cross platform desktop apps项目地址https://gitcode.com/gh_mirrors/pr/proton-native点击查看免费下载相关推荐Proton Native 快速上手指南用 React 语法构建跨平台桌面应用Proton Native 快速上手指南用 React 语法构建跨平台桌面应用 Proton Native 是一个基于 React 语法构建跨平台桌面应用的开桌面应用前端UI组件Proton Native使用React语法构建跨平台桌面应用Proton Native使用React语法构建跨平台桌面应用 Proton Native是一个革命性的开源框架允许开发者使用熟悉的React语法构建跨平台桌面应用前端UI组件Proton Native 项目导读用 React 语法构建跨平台桌面应用Proton Native 项目导读用 React 语法构建跨平台桌面应用 本文以 Proton Native 官方文档站点首页 docs/_coverpa桌面应用前端UI组件创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
