SuperAPI AI 工具集

react-native-styling

设计与创作

查看项目

更新于 10-15 22:13

技能介绍

用途:面向 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。