React Native 强制要求样式必须通过 StyleSheet.create() 编译为整数 ID，否则会触发警告、热重载失败或 Hermes 下直接报错；它不支持传统 CSS 文件、内联 style 字符串、嵌套、伪类、媒体查询及动态表达式，仅接受驼峰式 JavaScript 对象样式。
React Native 不支持传统 CSS 文件或内联 style 字符串（如 style="color: red;"），它只接受 JavaScript 对象形式的样式，且必须经由 StyleSheet.create() 编译后使用——这不是最佳实践，而是运行时强制要求；绕过它会导致警告、热重载失败，甚至在 Hermes 引擎下直接报错。
为什么 StyleSheet.create 是必须走的流程
React Native 原生渲染层（iOS 的 RCTView / Android 的 ReactRootView）不解析样式对象本身，只认 StyleSheet.create() 输出的整数 ID。这个 ID 是样式缓存和跨平台映射的关键。
- 未用
StyleSheet.create()的对象（如{ fontSize: 16 }）会被降级为“内联样式”，失去缓存、无法复用、触发StyleSheet: Invalid style警告 - 在启用
enableHermes: true的项目中，未编译样式可能被引擎拒绝，组件不渲染 -
DevTools中显示的styles.container名称，依赖该函数生成的符号表，否则调试时全是匿名数字 ID
StyleSheet.create 支持哪些写法，哪些不支持
它实现的是一个轻量级 CSS-in-JS 子集，覆盖 95% 布局与文本需求，但不是全量 CSS。
- ✅ 支持驼峰属性：
backgroundColor、fontSize、flexDirection、textAlign - ✅ 支持单位省略：写
padding: 16即可，不用px或rem - ✅ 支持颜色值：
#333、rgb(51, 51, 51)、rgba(0, 0, 0, 0.5)；不支持命名色（red）或 HSL - ❌ 不支持嵌套、伪类（
:hover、::before）、媒体查询（@media） - ❌ 不支持动态表达式：
container: { padding: isLarge ? 24 : 12 }会在create阶段报ReferenceError
Styled Components 在 RN 中怎么配才不翻车
它本质是语法糖 + 运行时注入，但 React Native 的样式系统限制让它比 Web 端更敏感。
- 必须安装三件套：
yarn add styled-components+yarn add -D @types/styled-components babel-plugin-styled-components -
babel.config.js中必须启用插件：['babel-plugin-styled-components', { displayName: true }]，否则开发时看不到组件名，调试困难 - 不能直接用 Web 版写法：
const Button = styled.button—— RN 没有button，得用styled.TouchableOpacity或styled.View - TypeScript 类型需显式声明 props：
styled.Text`font-weight: ${props => props.bold ? 'bold' : 'normal'};`
动态样式到底该在哪写
无论用 StyleSheet 还是 styled-components，动态逻辑都不能塞进 create 或模板字符串顶层——必须提出来，在组件 render 时组合。
- StyleSheet 场景：
style={[styles.base, isPressed && styles.pressed]}，靠数组顺序控制覆盖优先级 - Styled Components 场景：用 props 驱动，如
，样式里写background-color: ${props => props.variant === 'primary' ? '#007AFF' : '#5856D6'}; - ⚠️ 注意：RN 中没有 class 切换机制，所有状态样式都得靠 JS 条件判断 + 对象合并或插值，别幻想
classList.toggle
最容易被忽略的一点是：样式单位永远无 px，颜色不能写 red，StyleSheet.create 不是可选项而是强制入口——哪怕只是临时调试，也建议从第一行样式就走它，避免后期重构踩 runtime 错误。Styled Components 虽然写起来爽，但多一层抽象，出问题时排查链更长，尤其在 Hermes + TurboModule 混合环境下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
