rntwsc

React Native Tailwind 服務器元件一次編寫，隨處運行。在 React Native 中使用 Tailwind CSS 類別名稱，完全支援 Next.js App Router RSC 和 SSR 串流。類別名稱在原生端於建置時轉譯，在網頁端原樣保留。

您所需的一切

通用

一套代码运行于服务端、浏览器和原生端。通过转译器实现原生 async 组件。浏览器扩展只需在必要处单独分离逻辑即可。

RSC + SSR 串流

使用 Next.js App Router 的非同步服務器元件。無需客戶端瀑布流即可將 HTML 串流至瀏覽器。

導航

使用 Link 和 useRoute 的類型安全路由。透過統一的 API 在網頁和原生端均可運行。

國際化

支援命名空間的一流 i18n。只需新增 JSON 檔案即可新增語言。

Tailwind CSS

直接在 React Native 中使用 Tailwind 類別名稱。CVA、響應式選擇器和深色模式變體均開箱即用。

主題

內建支援深色模式的主題系統。無需重新載入頁面即可在運行時切換主題。

内置组件

基于核心原语构建的丰富 UI 组件库。开箱即用的一致样式、无障碍支持和深色模式。

Fetch + GraphQL 缓存

内置 Fetch 和 GraphQL 查询缓存，自动完成服务端到客户端的数据注水。无需额外配置，数据在服务端获取后在客户端无缝复用。

开发工具

内置遵循框架最佳实践的 ESLint 配置。使用开箱即用、符合所有规范的入门模板快速启动新项目。

为什么选择 rntwsc？

构建时提取样式，而非运行时注入

Expo Web 和 React Native Web 在运行时将样式注入 DOM。服务端没有 DOM，延迟注入样式会导致内容闪烁和注水不匹配，与 RSC 流式渲染根本不兼容。rntwsc 在构建时转译 Tailwind 类名。无运行时注入，无冲突，与 Next.js App Router 流式 SSR 完全兼容。

真正的 SSR 数据注水

在客户端请求数据会造成瀑布请求并失去 SSR 优势。通过 props 传递服务端数据在需要交互的客户端组件时会失效。SWR 和 React Query 需要手动序列化，且无法与 RSC 流式渲染集成。内置的 Fetch 和 GraphQL hooks 在服务端运行并填充缓存，将其序列化到流式 HTML 中，在客户端自动注水。零重复请求，零额外配置。

最大化代码复用

所有其他框架都要求你编写独立文件或运行时平台判断，才能在服务端、浏览器和原生端之间共享逻辑。Babel 插件在客户端构建时移除 async/await，将异步组件转换为读取已注水缓存的同步组件。一个文件在服务端、浏览器和原生端表现完全一致。