SuperAPI AI 工具集

react-strict-dom

前端与建站

查看项目

更新于 10-15 21:39

技能介绍

用途:在 Expo 项目中配置 react-strict-dom,配合 Tailwind CSS v4 与 react-native-css 开发 Web 与原生通用应用。react-strict-dom 提供在 Web 和原生平台表现一致的 HTML/CSS 子集。

主要能力:Babel 预设按平台转换 react-strict-dom 组件;PostCSS 插件处理 Web 构建样式;@react-strict-dom 指令在全局 CSS 中启用样式;CSS 包装的 HTML 基础组件支持 Tailwind className。Web 端渲染真实 HTML 元素,原生端将 HTML 元素转换为对应 React Native 组件(如 div→View、span/p→Text、img→Image)。

使用方式:安装 bun install react-strict-dom@0.0.54(0.0.55 依赖缺失,暂用 0.0.54)。在 babel.config.js 中加入 react-strict-dom/babel-preset,配置 debug、dev、platform。在 postcss.config.mjs 中加入 react-strict-dom/postcss-plugin 并设置 include。全局 CSS 首行添加 @react-strict-dom;。用 react-native-css 的 useCssElement 创建支持 className 的 HTML 组件,再以 html.div、html.h1 等配合 Tailwind 类名使用。

适用场景:需要语义化 HTML、Web 端 SEO 与无障碍、跨 Web 与 iOS/Android 复用同一套组件与样式的 Expo 应用。

限制:版本 0.0.55 存在依赖问题;@react-strict-dom 必须是全局 CSS 第一条规则,否则原生样式不生效;原生端 backgroundImage 需经 normalizeStyle 映射为 experimental_backgroundImage;设置 displayName 时需类型断言。其余细节暂未提供。