StyleSheet.create是唯一合法入口，因React Native渲染层只识别其生成的整数ID，无法解析CSS字符串；直接import './App.css'无效，react-native-web也需先经StyleSheet.create再转为CSS类名。
StyleSheet.create 是唯一合法入口，Web端 CSS 文件不能直接 import 或 link —— 这不是兼容性问题，是 React Native 渲染层根本无法解析 CSS 字符串。
为什么 import './App.css' 在 React Native 里完全无效
React Native 的原生视图（iOS 的 RCTView、Android 的 ReactRootView）不接收任何 CSS 文本或 DOM 样式规则。它只认 StyleSheet.create 输出的整数 ID。即使你用 react-native-web，也必须先走 StyleSheet.create 流程，再由 Web 解析器转成 CSS 类名，而不是反过来。
常见错误现象：
- 直接
import './styles.css'→ 无报错但样式不生效，组件渲染为默认布局 - 在 JSX 中写
style={{ color: 'red' }}→ 能显示但触发StyleSheet: Invalid style警告，Hermes 引擎下直接崩溃 - 用
styled-components但没配styled-components/native→ 白屏，DevTools 里看不到任何样式节点，也不报错
react-native-web 下的 CSS 类名生成机制
它不是把你的 .css 文件塞进 <style> 标签，而是把 StyleSheet.create 定义的样式对象，编译成带哈希的 class 名（如 .unistyles_kaoph5），再注入到 DOM。媒体查询也靠这个机制落地：
const styles = StyleSheet.create({
text: {
fontSize: 32,
_web: {
'@media (min-width: 1200px)': {
fontSize: 40,
},
},
},
});
注意：_web 是 react-native-unistyles 提供的平台条件字段，不是标准 StyleSheet 的能力；原生 StyleSheet.create 不支持 @media，必须借助第三方库。
立即学习“前端免费学习笔记（深入）”；
关键限制：
-
StyleSheet.create本身不解析媒体查询，unistyles或react-native-css-modules才能补上 - 所有 Web 专属属性（如
cursor、display: grid）必须包在_web对象里，否则会被原生端忽略或报错 -
fontFamily在 Web 上可 fallback 到系统字体，但值仍需写成无空格字符串（'system-ui'✅，'"Helvetica Neue"'❌）
想复用现有 Web CSS？得重写，不是“引入”
没有“转换工具”能把 .css 自动变成 StyleSheet.create 对象 —— 因为语义不等价：CSS 支持嵌套、伪类、全局作用域；而 StyleSheet.create 是扁平对象、无伪类、无继承、单位省略、全驼峰。
实际迁移建议：
- 把
padding: 1rem→padding: 16（按 1rem ≈ 16px 换算，无单位） - 把
background-color: #333→backgroundColor: '#333'（驼峰 + 单引号） - 把
.btn:hover { opacity: 0.8 }→ 改用onPressIn/onPressOut+ 动态style合并 - 把
@media (max-width: 768px)→ 拆成两个静态样式对象，运行时用Dimensions.get('window').width判断后合并
styled-components/native 配置最容易漏掉的点
很多人装了包却白屏，就卡在三处：
- 导入路径必须是
styled-components/native，不是styled-components -
babel.config.js里没加['babel-plugin-styled-components', { displayName: true }] - 没启用
enableHermes: false（某些 Hermes 版本与 styled-components 兼容性差，临时绕过）
一旦漏掉任意一项，组件会渲染为空节点，控制台静默失败 —— 这是调试时最耗时间的盲区。
真正难的不是语法转换，是接受「CSS 不是拿来引入的，而是被重构的」这个前提。所有 Web 样式能力，在 React Native 里都要经过一次语义降级和平台适配，跳过这步，只会堆出不可维护的 hack。
