用途:面向 React Native 应用的样式实现,指导使用 StyleSheet API、Flexbox、主题化与响应式设计。适用场景包括编写 React Native 样式、搭建主题系统、实现 Flexbox 布局、响应式适配、暗色模式与平台差异样式。
主要能力与规范:
- StyleSheet.create:始终使用它代替内联对象,以获得优化与校验。
- Flexbox:作为默认布局方案,不支持 CSS Grid。
- 响应式:使用 Dimensions、useWindowDimensions 或百分比宽度,例如 const { width } = useWindowDimensions(); const isSmall = width < 375;
- 主题化:将颜色、字体集中放在 theme/ 目录中,避免魔法数字。
- 平台样式:用 Platform.select 处理条件样式。
- 暗色模式:使用 React Context 配合 useColorScheme()。
反模式:不使用内联样式;不使用魔法数字;除必要外避免绝对定位;不使用固定宽度,改用 flex 或百分比。
限制与补充:资料未说明该技能的具体安装方式、依赖版本、收费情况与工具形态;更详细的 StyleSheet 示例、Design Tokens、主题系统、响应式缩放与阴影辅助等内容,资料指向 references/theming.md。