桌面应用跨平台【免费下载链接】react-nodeguiBuild performant, native and cross-platform desktop applications with native React powerful CSS like styling.项目地址https://gitcode.com/gh_mirrors/re/react-nodegui点击查看免费下载React NodeGui 是一款面向桌面端的 React 渲染器它不用 HTML、CSS 与浏览器而是让 React 直接驱动由 Qt 创建的原生窗口与原生控件。本文以官方入门教程website/docs/guides/tutorial.md为核心脉络带你从零理解 React NodeGui 应用的基本结构、Window等组件的底层原理并跑通官方 starter 项目读完你将能够独立搭建第一个原生桌面应用并知道下一步如何深入样式与布局。React NodeGui 开发一句话概括在开发层面一个 React NodeGui 应用本质上就是一个Node.js 应用。它没有自己的包管理器、没有特殊的运行时要求一切从一个与普通 Node.js 模块完全一致的package.json开始。一个最基础的 React NodeGui 应用只需要两个文件your-app/ ├── package.json ├── index.js所有 React NodeGui 提供的 API 和功能都通过nodegui/react-nodegui与nodegui/nodegui两个模块暴露用法与require任何普通 Node.js 模块完全一致require(nodegui/react-nodegui);与此同时整个 Node.js 标准库和 npm 生态中任意可用的 Node 模块都可以直接在 React NodeGui 应用中使用——这一点在本教程的后面会再次强调。在仓库中可以看到nodegui/react-nodegui的入口文件 src/index.ts 就是一张完整的“导出清单”它把Window、View、Text、Button、CheckBox等组件以及Renderer、useEventHandler、热重载工具hot、appProxy全部按命名空间方式导出。也就是说教程中所说的“nodegui/react-nodegui模块在命名空间中导出组件和功能”在源码层面有着清晰的一一对应。第一个最小应用用Window组件开一个窗口教程给出的最简应用是一个函数式 React 组件配合Renderer.render完成渲染const { Window, Renderer } require(nodegui/react-nodegui); const App () { return Window/Window; }; Renderer.render(App /);这里的index.js或main.js职责很明确创建窗口并处理应用可能遇到的所有系统事件。值得展开的是Renderer.render这一步。查看 src/renderer/index.ts 的实现可以发现它内部做了两件事通过reconciler.createContainer(containerInfo, isConcurrent, hydrate)创建 React 的根 Fiber 节点当前实现开启了 concurrent 模式通过reconciler.updateContainer(element, Renderer.container, parentComponent, callback)启动协调reconciliation并真正渲染结果。这正是 React NodeGui 之所以“是 React”的底层原因它基于react-reconciler实现了一套自定义 host config。在 src/reconciler/index.ts 中可以看到完整的宿主配置包括createInstance、appendChild、removeChild、commitUpdate等生命周期回调组件则通过 src/components/config.ts 中的registerComponent注册进一个tagName → ComponentConfig映射表由 reconciler 按标签名查表创建对应原生控件。这套机制与 React DOM、React Native 属于同一类架构只是把“宿主环境”从浏览器换成了 Qt。这里到底发生了什么教程用一节专门回答了“Whats going on here”核心结论有三点值得逐条结合源码印证第一你运行的是 Node.js 应用而不是浏览器应用。因此 React NodeGui 应用里没有document、window浏览器全局对象等任何浏览器 API你看到的窗口是 Qt 创建的原生窗口控件而不是一个被浏览器包裹的 HTML 页面。第二Window组件本质上是一个轻量级 JavaScript 包装器。查看 src/components/Window/RNWindow.ts 可以看到RNWindow类直接继承自 NodeGui 的QMainWindow而QMainWindow内部就是 Qt 的QMainWindowexport class RNWindow extends QMainWindow implements RNWidget { setProps(newProps: WindowProps, oldProps: WindowProps): void { setWindowProps(this, newProps, oldProps); } ... static tagName mainwindow; }这意味着你在 JSX 里给Window设置的每一个 propwindowTitle、minSize、styleSheet、menuBar等最终都会作用到那个真实的原生窗口控件上。setWindowProps中的 setter 会把 prop 映射为对应的 Qt 方法调用例如menuBar对应window.setMenuBar(menubar)见 src/components/Window/RNWindow.ts。第三相比浏览器方案它非常轻量离操作系统更近。因为控件就是系统级的原生控件没有 DOM、没有浏览器渲染引擎这一层间接成本。顺便一提RNWindow对子节点有明确的约束它只允许一个 central widget 和一个 menu bar多子节点或第二个菜单栏会打印警告见 src/components/Window/RNWindow.ts这一点在写布局时值得留意。在 React NodeGui 中任何组件类的命名都遵循RN前缀如RNView、RNText并实现RNWidget接口setProps、appendChild、removeChild等static tagName则标明它在 JSX 中的标签名。跑通官方 Starter 项目最快体验 React NodeGui 的方式是克隆并运行官方 starter 仓库nodegui/react-nodegui-starter。前提条件需要安装 Git 与 npm并且本机已配置好 Node.js 与 npm 环境node -v、npm -v能正常输出版本号。按以下步骤操作# 克隆仓库 $ git clone https://github.com/nodegui/react-nodegui-starter # 进入仓库目录 $ cd react-nodegui-starter # 安装依赖 $ npm install # 运行 dev server负责编译与热更新 $ npm run dev # 在另一个终端标签页或窗口中启动应用 $ npm startnpm run dev与npm start的职责划分可以从当前仓库的 package.json 中看到同类脚本的影子dev脚本执行tsc qode ./dist/demo.js即先编译 TypeScript再用 NodeGui 专用运行时qode加载编译产物而start则负责真正拉起应用进程。两个命令通常需要分开的终端窗口同时运行。克隆下来后你可以直接修改 starter 里的组件代码并观察窗口实时变化——这就完成了你的第一个 React NodeGui 应用。除了基本窗口还有什么React NodeGui 内置了一批与 Web 世界概念对应的基础组件。教程点名的有View—— 类似 Web 中的div用于包裹其他组件、组织结构。在 src/components/View/RNView.ts 中可以看到RNView直接继承 Qt 的QWidget并且会在添加第一个子节点时自动创建FlexLayout来管理布局——这是后面学习 布局指南 时的重要前提。CheckBox、PushButton即Button等交互控件。完整列表见 src/index.ts 的导出项包括BoxView、GridView含GridRow/GridColumn、Slider、Text、Image、AnimatedImage、LineEdit、PlainTextEdit、Calendar、ProgressBar、RadioButton、Dial、SpinBox、ScrollArea、ComboBox、SystemTrayIcon、Tabs/TabItem、各类对话框Dialog、ColorDialog、FileDialog、FontDialog、InputDialog、ProgressDialog、ErrorPrompt、Table/TableItem、List/ListItem、Menu/MenuBar等 30 余个组件。每个组件的可用 prop 定义在其对应接口中例如View的完整 propsvisible、styleSheet、style、geometry、id、mouseTracking、enabled、windowOpacity、windowTitle、windowState、cursor、minSize/maxSize/size、pos、on、ref、attributes、windowFlags可以在 ViewProps 接口文档 中查阅其他组件的 props 接口文档位于 website/docs/api/interfaces 目录下例如 buttonprops.md、checkboxprops.md。从 prop 到原生行为的映射同样可以在源码中找到证据setViewProps见 src/components/View/RNView.ts为id调用widget.setObjectName(id)、为visible调用widget.show()/hide()、为styleSheet调用widget.setStyleSheet(...)。也就是说View idfoo /在底层就是把 Qt 控件的 objectName 设为foo这与 Web 中id的作用方式神似但机制完全不同。除此之外正如教程强调的React NodeGui 应用可以访问整个 Node.js 模块生态。任何你在 Node.js 中能用的模块都可以直接在 React NodeGui 中使用——文件读写、网络请求、数据库驱动等能力开箱即用这让桌面应用的能力边界被极大扩展。一个稍完整的组合示例把Window、View、Text、Button组合起来就能得到一个带有样式和结构的真实界面。仓库自带的示例 src/demo.tsx 展示了这种组合方式import React from react; import { Text, Renderer, Window, Button, View } from .; const App () { return ( Window styleSheet{styleSheet} View idcontainer View idtextContainer TextHello/Text /View View Button textClick me/Button /View /View /Window ); }; const styleSheet #container { flex: 1; min-height: 100%; justify-content: center; } #textContainer { flex-direction: row; justify-content: space-around; align-items: center; } ; Renderer.render(App /);注意两点样式以 CSS 字符串形式通过styleSheetprop 传入且支持flex、justify-content、align-items等 flexbox 属性#container这样的选择器引用的正是组件上设置的id。下一步让界面更漂亮“我只想要比原生控件更定制、更漂亮的界面怎么办”——答案是样式系统。React NodeGui 的样式基于 Qt Style Sheets语法与 Web CSS 几乎一致同时通过styleprop 支持内联样式并通过 Facebook 的 Yoga 库提供 flexbox 布局支持。样式、选择器、伪状态如:hover、级联规则、qproperty-*高级用法等完整内容请继续阅读 样式指南Styling随后可以接着学习 布局指南Layout。至此你已经掌握了 React NodeGui 应用的基本骨架Node.js 工程结构、Renderer.render渲染入口、Window/View/Text等原生组件的使用与底层映射以及如何跑通官方 starter。接下来就是边改代码边观察原生窗口反馈开始构建属于你的桌面应用了。赞分享桌面应用跨平台【免费下载链接】react-nodeguiBuild performant, native and cross-platform desktop applications with native React powerful CSS like styling.项目地址https://gitcode.com/gh_mirrors/re/react-nodegui点击查看免费下载相关推荐NodeGui 入门教程用 Node.js Qt 原生组件构建跨平台桌面应用NodeGui 入门教程用 Node.js Qt 原生组件构建跨平台桌面应用 本教程面向具备 Web 开发经验、熟悉 JavaScript 或 TypeS桌面应用跨平台OpenCore Legacy Patcher终极指南让老Mac焕发新生的简单方法OpenCore Legacy Patcher终极指南让老Mac焕发新生的简单方法 想象一下你的老MacBook Pro还能运行最新的macOS系统吗这听操作系统固件驱动开发使用NodeGui构建高性能原生跨平台桌面应用使用NodeGui构建高性能原生跨平台桌面应用 在寻找一个既能提供高性能、又具备强大灵活性的解决方案来构建桌面应用程序吗NodeGui或许正是你需要的答案。这桌面应用跨平台上一篇3 分钟搞定 Beyond Compare 5 授权生成许可证激活完整指南下一篇如何把碧蓝航线的Live2D模型提取出来:AzurLaneLive2DExtract 完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/10/10 2:34:02 · 阅读 1.2k React NodeGui 入门教程：用 React 和原生 Qt 组件构建跨平台桌面应用
桌面应用跨平台【免费下载链接】react-nodeguiBuild performant, native and cross-platform desktop applications with native React powerful CSS like styling.项目地址https://gitcode.com/gh_mirrors/re/react-nodegui点击查看免费下载React NodeGui 是一款面向桌面端的 React 渲染器它不用 HTML、CSS 与浏览器而是让 React 直接驱动由 Qt 创建的原生窗口与原生控件。本文以官方入门教程website/docs/guides/tutorial.md为核心脉络带你从零理解 React NodeGui 应用的基本结构、Window等组件的底层原理并跑通官方 starter 项目读完你将能够独立搭建第一个原生桌面应用并知道下一步如何深入样式与布局。React NodeGui 开发一句话概括在开发层面一个 React NodeGui 应用本质上就是一个Node.js 应用。它没有自己的包管理器、没有特殊的运行时要求一切从一个与普通 Node.js 模块完全一致的package.json开始。一个最基础的 React NodeGui 应用只需要两个文件your-app/ ├── package.json ├── index.js所有 React NodeGui 提供的 API 和功能都通过nodegui/react-nodegui与nodegui/nodegui两个模块暴露用法与require任何普通 Node.js 模块完全一致require(nodegui/react-nodegui);与此同时整个 Node.js 标准库和 npm 生态中任意可用的 Node 模块都可以直接在 React NodeGui 应用中使用——这一点在本教程的后面会再次强调。在仓库中可以看到nodegui/react-nodegui的入口文件 src/index.ts 就是一张完整的“导出清单”它把Window、View、Text、Button、CheckBox等组件以及Renderer、useEventHandler、热重载工具hot、appProxy全部按命名空间方式导出。也就是说教程中所说的“nodegui/react-nodegui模块在命名空间中导出组件和功能”在源码层面有着清晰的一一对应。第一个最小应用用Window组件开一个窗口教程给出的最简应用是一个函数式 React 组件配合Renderer.render完成渲染const { Window, Renderer } require(nodegui/react-nodegui); const App () { return Window/Window; }; Renderer.render(App /);这里的index.js或main.js职责很明确创建窗口并处理应用可能遇到的所有系统事件。值得展开的是Renderer.render这一步。查看 src/renderer/index.ts 的实现可以发现它内部做了两件事通过reconciler.createContainer(containerInfo, isConcurrent, hydrate)创建 React 的根 Fiber 节点当前实现开启了 concurrent 模式通过reconciler.updateContainer(element, Renderer.container, parentComponent, callback)启动协调reconciliation并真正渲染结果。这正是 React NodeGui 之所以“是 React”的底层原因它基于react-reconciler实现了一套自定义 host config。在 src/reconciler/index.ts 中可以看到完整的宿主配置包括createInstance、appendChild、removeChild、commitUpdate等生命周期回调组件则通过 src/components/config.ts 中的registerComponent注册进一个tagName → ComponentConfig映射表由 reconciler 按标签名查表创建对应原生控件。这套机制与 React DOM、React Native 属于同一类架构只是把“宿主环境”从浏览器换成了 Qt。这里到底发生了什么教程用一节专门回答了“Whats going on here”核心结论有三点值得逐条结合源码印证第一你运行的是 Node.js 应用而不是浏览器应用。因此 React NodeGui 应用里没有document、window浏览器全局对象等任何浏览器 API你看到的窗口是 Qt 创建的原生窗口控件而不是一个被浏览器包裹的 HTML 页面。第二Window组件本质上是一个轻量级 JavaScript 包装器。查看 src/components/Window/RNWindow.ts 可以看到RNWindow类直接继承自 NodeGui 的QMainWindow而QMainWindow内部就是 Qt 的QMainWindowexport class RNWindow extends QMainWindow implements RNWidget { setProps(newProps: WindowProps, oldProps: WindowProps): void { setWindowProps(this, newProps, oldProps); } ... static tagName mainwindow; }这意味着你在 JSX 里给Window设置的每一个 propwindowTitle、minSize、styleSheet、menuBar等最终都会作用到那个真实的原生窗口控件上。setWindowProps中的 setter 会把 prop 映射为对应的 Qt 方法调用例如menuBar对应window.setMenuBar(menubar)见 src/components/Window/RNWindow.ts。第三相比浏览器方案它非常轻量离操作系统更近。因为控件就是系统级的原生控件没有 DOM、没有浏览器渲染引擎这一层间接成本。顺便一提RNWindow对子节点有明确的约束它只允许一个 central widget 和一个 menu bar多子节点或第二个菜单栏会打印警告见 src/components/Window/RNWindow.ts这一点在写布局时值得留意。在 React NodeGui 中任何组件类的命名都遵循RN前缀如RNView、RNText并实现RNWidget接口setProps、appendChild、removeChild等static tagName则标明它在 JSX 中的标签名。跑通官方 Starter 项目最快体验 React NodeGui 的方式是克隆并运行官方 starter 仓库nodegui/react-nodegui-starter。前提条件需要安装 Git 与 npm并且本机已配置好 Node.js 与 npm 环境node -v、npm -v能正常输出版本号。按以下步骤操作# 克隆仓库 $ git clone https://github.com/nodegui/react-nodegui-starter # 进入仓库目录 $ cd react-nodegui-starter # 安装依赖 $ npm install # 运行 dev server负责编译与热更新 $ npm run dev # 在另一个终端标签页或窗口中启动应用 $ npm startnpm run dev与npm start的职责划分可以从当前仓库的 package.json 中看到同类脚本的影子dev脚本执行tsc qode ./dist/demo.js即先编译 TypeScript再用 NodeGui 专用运行时qode加载编译产物而start则负责真正拉起应用进程。两个命令通常需要分开的终端窗口同时运行。克隆下来后你可以直接修改 starter 里的组件代码并观察窗口实时变化——这就完成了你的第一个 React NodeGui 应用。除了基本窗口还有什么React NodeGui 内置了一批与 Web 世界概念对应的基础组件。教程点名的有View—— 类似 Web 中的div用于包裹其他组件、组织结构。在 src/components/View/RNView.ts 中可以看到RNView直接继承 Qt 的QWidget并且会在添加第一个子节点时自动创建FlexLayout来管理布局——这是后面学习 布局指南 时的重要前提。CheckBox、PushButton即Button等交互控件。完整列表见 src/index.ts 的导出项包括BoxView、GridView含GridRow/GridColumn、Slider、Text、Image、AnimatedImage、LineEdit、PlainTextEdit、Calendar、ProgressBar、RadioButton、Dial、SpinBox、ScrollArea、ComboBox、SystemTrayIcon、Tabs/TabItem、各类对话框Dialog、ColorDialog、FileDialog、FontDialog、InputDialog、ProgressDialog、ErrorPrompt、Table/TableItem、List/ListItem、Menu/MenuBar等 30 余个组件。每个组件的可用 prop 定义在其对应接口中例如View的完整 propsvisible、styleSheet、style、geometry、id、mouseTracking、enabled、windowOpacity、windowTitle、windowState、cursor、minSize/maxSize/size、pos、on、ref、attributes、windowFlags可以在 ViewProps 接口文档 中查阅其他组件的 props 接口文档位于 website/docs/api/interfaces 目录下例如 buttonprops.md、checkboxprops.md。从 prop 到原生行为的映射同样可以在源码中找到证据setViewProps见 src/components/View/RNView.ts为id调用widget.setObjectName(id)、为visible调用widget.show()/hide()、为styleSheet调用widget.setStyleSheet(...)。也就是说View idfoo /在底层就是把 Qt 控件的 objectName 设为foo这与 Web 中id的作用方式神似但机制完全不同。除此之外正如教程强调的React NodeGui 应用可以访问整个 Node.js 模块生态。任何你在 Node.js 中能用的模块都可以直接在 React NodeGui 中使用——文件读写、网络请求、数据库驱动等能力开箱即用这让桌面应用的能力边界被极大扩展。一个稍完整的组合示例把Window、View、Text、Button组合起来就能得到一个带有样式和结构的真实界面。仓库自带的示例 src/demo.tsx 展示了这种组合方式import React from react; import { Text, Renderer, Window, Button, View } from .; const App () { return ( Window styleSheet{styleSheet} View idcontainer View idtextContainer TextHello/Text /View View Button textClick me/Button /View /View /Window ); }; const styleSheet #container { flex: 1; min-height: 100%; justify-content: center; } #textContainer { flex-direction: row; justify-content: space-around; align-items: center; } ; Renderer.render(App /);注意两点样式以 CSS 字符串形式通过styleSheetprop 传入且支持flex、justify-content、align-items等 flexbox 属性#container这样的选择器引用的正是组件上设置的id。下一步让界面更漂亮“我只想要比原生控件更定制、更漂亮的界面怎么办”——答案是样式系统。React NodeGui 的样式基于 Qt Style Sheets语法与 Web CSS 几乎一致同时通过styleprop 支持内联样式并通过 Facebook 的 Yoga 库提供 flexbox 布局支持。样式、选择器、伪状态如:hover、级联规则、qproperty-*高级用法等完整内容请继续阅读 样式指南Styling随后可以接着学习 布局指南Layout。至此你已经掌握了 React NodeGui 应用的基本骨架Node.js 工程结构、Renderer.render渲染入口、Window/View/Text等原生组件的使用与底层映射以及如何跑通官方 starter。接下来就是边改代码边观察原生窗口反馈开始构建属于你的桌面应用了。赞分享桌面应用跨平台【免费下载链接】react-nodeguiBuild performant, native and cross-platform desktop applications with native React powerful CSS like styling.项目地址https://gitcode.com/gh_mirrors/re/react-nodegui点击查看免费下载相关推荐NodeGui 入门教程用 Node.js Qt 原生组件构建跨平台桌面应用NodeGui 入门教程用 Node.js Qt 原生组件构建跨平台桌面应用 本教程面向具备 Web 开发经验、熟悉 JavaScript 或 TypeS桌面应用跨平台OpenCore Legacy Patcher终极指南让老Mac焕发新生的简单方法OpenCore Legacy Patcher终极指南让老Mac焕发新生的简单方法 想象一下你的老MacBook Pro还能运行最新的macOS系统吗这听操作系统固件驱动开发使用NodeGui构建高性能原生跨平台桌面应用使用NodeGui构建高性能原生跨平台桌面应用 在寻找一个既能提供高性能、又具备强大灵活性的解决方案来构建桌面应用程序吗NodeGui或许正是你需要的答案。这桌面应用跨平台上一篇3 分钟搞定 Beyond Compare 5 授权生成许可证激活完整指南下一篇如何把碧蓝航线的Live2D模型提取出来:AzurLaneLive2DExtract 完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考