React Native 不支持原生 CSS 文件，因其样式系统不解析 CSS 规则、无 DOM/CSSOM；可复用样式逻辑与设计意图，通过 @emotion/native、NativeWind 或手动同步 CSS 变量实现跨端样式复用。
不能直接复用 Web 端的 CSS 文件（比如 .css 或 .scss），因为 React Native 的样式系统不解析 CSS 规则，也不支持选择器、伪类、媒体查询等语法。但你可以复用**样式逻辑和设计意图**，通过适配层把 CSS 值映射到 RN 的 StyleSheet 对象或兼容库中。
为什么原生 CSS 文件在 React Native 中无效
React Native 渲染引擎不走 DOM，也没有 CSSOM。像 .button { color: blue; hover: { opacity: 0.8 } } 这类写法会直接报错——StyleSheet.create 只接受 plain JavaScript 对象，且不支持嵌套、伪类、@media 等。
常见错误现象包括：
-
StyleSheet.create报Invalid style property 'hover' - 导入
import './Button.css'后样式完全不生效，控制台无报错但 UI 无变化 - 用
className渲染View，结果被忽略（RN 中className是无效 prop）
用 @emotion/native 将 CSS 字符串转为 RN 样式对象
@emotion/native 允许你写类似 CSS 的模板字符串，并在运行时编译成 RN 可识别的样式对象。它不是“加载 CSS”，而是把 CSS 语法糖转译成 JS 样式声明。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 安装：
yarn add @emotion/react @emotion/native - 使用
styled.View或css模板字面量，例如：const Button = styled.View` background-color: #007AFF; padding: 12px 24px; border-radius: 8px; `;
- 注意：不支持
:hover，但可用_web扩展（需配合react-native-web）；移动端用onPressIn/onPressOut模拟 - 避免在模板字符串里写复杂媒体查询，RN 端无法响应；改用
useWindowDimensions+ 条件样式
用 NativeWind 把 Tailwind 类名映射到多平台样式
如果你的 Web 端已用 Tailwind，NativeWind 是最接近“复用”的方案——它让同一套 className 在 iOS/Android/Web 上都生效，但底层分别输出 StyleSheet.create（原生）或真实 CSS（Web）。
关键限制与配置点：
- 必须启用预编译（
nativeWind插件需在 Babel/SWC 阶段介入），否则运行时无法解析类名 -
tailwind.config.js中的content必须包含所有 JSX 文件路径，否则类名会被 PurgeCSS 删除 - Web 端需确保已接入
react-native-web，且AppRegistry.registerComponent调用正确 - 不支持 Web 专属类如
hover:bg-blue-500在原生端生效；可加_web:hover:bg-blue-500实现条件应用
手动提取 CSS 变量并同步到 RN 主题系统
最稳定、可控的方式是把 Web 端的 CSS 自定义属性（:root { --primary: #007AFF; }）抽成 JS 对象，在 RN 和 Web 共享同一份主题配置。
例如：
// theme.ts
export const colors = {
primary: '#007AFF',
text: {
default: '#111',
secondary: '#666',
},
};
然后在 RN 中：
- 用
StyleSheet.create引用colors.primary - 用
@emotion/native的css函数内联引用 - 在
NativeWind的tailwind.config.js中通过theme.extend.colors注入
这种方式绕过了语法差异，直击样式复用的本质：值一致、命名一致、变更一处，两端同步。真正容易被忽略的是颜色语义（比如 --error 在 Web 是红色，在 RN 可能还要兼顾色盲对比度），这类业务含义层的对齐，比技术映射更难自动化。
