StyleSheet.create 是 React Native 运行时强制要求的样式创建方式，因其将样式编译为原生端可识别的整数 ID，绕过则报错或禁用；它支持驼峰式 CSS-in-JS 子集（如 flex、fontSize），不支持嵌套、动态表达式、伪类等，需在模块顶层定义并配合运行时条件合并。
React Native 里不能直接用 CSS 文件或 style 属性写传统 CSS，必须用 StyleSheet.create 创建样式对象 —— 这不是可选项，是运行时强制要求，否则会报 StyleSheet: Invalid style 或热重载失败。
为什么 StyleSheet.create 不是“推荐做法”，而是必须走的流程
React Native 的渲染层（无论是 iOS 的 RCTView 还是 Android 的 ReactRootView）不解析字符串样式，只接受经过 StyleSheet.create 处理后的整数 ID。直接传入内联对象（如 { fontSize: 16, color: 'red' }）虽能临时跑通，但会绕过样式缓存、失去平台级优化，且在严格模式下触发警告。
-
StyleSheet.create会把样式对象编译成唯一数字 ID，供原生端快速映射 - 未通过它创建的样式，在 Hermes 引擎下可能被完全拒绝（尤其启用
enableHermes: true时） - 调试时 DevTools 显示的样式名（如
styles.container）也依赖该函数生成的内部符号表
StyleSheet.create 支持哪些 CSS 属性写法
它支持的是“CSS-in-JS”子集，不是全量 CSS —— 比如没有 :hover、@media、伪类，但覆盖了 95% 布局与文本需求。属性名全部转为驼峰（background-color → backgroundColor），单位默认是逻辑像素（无需写 px）。
- 布局类：支持
flex、margin、padding、borderWidth、alignItems等，但float、position: absolute需配合top/left才生效 - 文本类：支持
fontSize、lineHeight、textAlign、textDecorationLine（注意不是text-decoration） - 颜色值：支持十六进制（
#333）、RGB（rgb(51, 51, 51)）、RGBA（rgba(0, 0, 0, 0.5)），不支持命名色（red）或 HSL - 字体族：
fontFamily必须是设备已安装字体名（iOS 用System，Android 用Roboto），不能写font-family: "Helvetica Neue"这种带空格/引号的完整 CSS 字符串
常见错误：嵌套、条件样式和动态值怎么处理
StyleSheet.create 只接受静态对象，不支持嵌套（像 Sass 那样）、也不接受变量或表达式。所有动态逻辑必须提出来，在组件 render 中组合。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误写法：
container: { padding: isLarge ? 24 : 12 }——isLarge在 create 时未定义，会报ReferenceError - ✅ 正确方式：先定义基础样式，再在 JSX 中合并：
[styles.container, isLarge && styles.containerLarge] - ❌ 不支持对象展开：
...commonText不能出现在create内部（ESLint 会报react-native/no-raw-text类似规则） - ✅ 多个样式对象可叠加使用：
style={[styles.text, props.error && styles.errorText]}，但注意数组中false/null会被自动过滤，undefined会报错 - ⚠️ 动画值不能进
StyleSheet：比如Animated.Value必须用animatedStyle单独传给Animated.View，不能塞进styles.animatedBox
性能提示：样式复用与模块作用域
每个 StyleSheet.create 调用都会生成新样式表实例。如果在组件函数体内调用，每次渲染都重建样式 ID，导致内存泄漏和性能下降。
- ✅ 把
StyleSheet.create放在组件外部顶层作用域（即模块级） - ✅ 同一屏幕多个组件共用样式时，可抽到独立文件（如
sharedStyles.js），但注意避免循环引用 - ⚠️
StyleSheet.flatten是调试用的反向工具，仅用于检查最终计算值，不要在生产渲染中调用（它会破坏样式 ID 缓存） - ⚠️ 如果用了 TypeScript，记得给样式对象加类型注解：
const styles = StyleSheet.create({ ... })，否则flexDirection等属性可能被标红
最常被忽略的一点：深色模式适配不能靠 StyleSheet.create 自动响应，必须结合 useColorScheme() 和运行时样式合并 —— 样式对象本身是静态的，变的是你传给 style 的数组内容。
