stylesheet.create是运行时强制要求的样式创建方式，因其将样式编译为原生端可识别的整数id；直接使用内联对象{fontsize:16,color:'red'}会绕过优化、触发警告或报错，且不被hermes引擎接受。
StyleSheet.create 是唯一合法的入口，不走它就不是 React Native 的样式。
为什么不能直接写 { fontSize: 16, color: 'red' }？
这不是“推荐不推荐”的问题，而是运行时强制拦截：
- 原生层（iOS 的
RCTView/ Android 的ReactRootView）只认整数 ID，不解析 JS 对象 - 绕过
StyleSheet.create会触发StyleSheet: Invalid style警告，Hermes 引擎下直接报错 - 内联对象每次 render 都新建，失去样式缓存和桥接优化，热重载也容易失败
StyleSheet.create 支持哪些 CSS 属性？
它只支持驼峰命名的子集，不是全量 CSS：
- 布局类：用
flex、marginVertical、borderWidth，但不用float或position: relative（必须配top/left才生效） - 文本类：用
fontSize、textDecorationLine（不是textDecoration），不支持:hover或媒体查询 - 颜色值：接受
#333、rgb(51, 51, 51)、rgba(0,0,0,0.5)，但不支持red这类命名色 - 字体：用
fontFamily: 'System'（iOS）或'Roboto'（Android），不能写带空格/引号的完整 CSS 字符串
怎么处理条件样式和动态值？
StyleSheet.create 只接受静态对象，所有动态逻辑必须移出创建阶段：
- ❌ 错误：
container: { padding: isLarge ? 24 : 12 }——isLarge在模块顶层未定义，直接报ReferenceError - ✅ 正确：先定义
styles.containerSmall和styles.containerLarge，再在 JSX 中用数组合并：[styles.container, isLarge && styles.containerLarge] - ✅ 也可用
StyleSheet.flatten手动合并多个样式对象，适合复用场景 - 注意：布尔值
false/null会被自动过滤，但0或空字符串''会保留并导致样式异常
能不能把样式拆到外部文件？
可以，但必须仍走 StyleSheet.create：
- 新建
src/styles/button.js，导出const styles = StyleSheet.create({ ... })，然后import buttonStyles from './styles/button' - 不要用
.css或.scss文件——React Native 不解析它们，导入后也不会生效 - 第三方方案如
react-native-css-modules是额外构建层，不是官方路径，调试链路更长，出错时堆栈难定位
create，等于没交作业。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
