Sri统一样式指南：UniversalStyleSheet一套样式跨Web与Mobile的完整清单

Sri统一样式指南UniversalStyleSheet一套样式跨Web与Mobile的完整清单【免费下载链接】sriBuild truly native cross platform (web,ios,android) apps using scalajs and react, react-native项目地址: https://gitcode.com/gh_mirrors/sr/sriSriScala React interface是一个基于 Scala.js React React Native 的跨平台框架一套代码可同时构建 Web、iOS、Android 应用。Sri 统一样式的核心就是 UniversalStyleSheet一份样式定义Web 与 Mobile 通用不用为 CSS 和 React Native 分别重写。本文是 Sri 统一样式的完整清单如何定义样式、如何扩展复用、全部可用属性列表以及唯一一个需要小心的单位差异。一、为什么 Sri 需要一套样式三端用跨平台写样式通常要在两种习惯里二选一Web 的 CSS 写padding: 10pxReact Native 却要求padding: 10。结果就是平台 if-else 写进代码样式定义分裂成两套Sri 的解法把 Web 与 Mobile 共同支持的样式属性抽成一个通用集合用同一套语法定义一次——这正是 Sri 统一样式要解决的问题。二、快速上手style 与 styleE 两个核心方法Sri 的样式表按平台分两个 trait样式表所在模块适用场景UniversalStyleSheetuniversalWeb Mobile 通用样式跨平台组件首选WebStyleSheetwebWeb 专用支持更完整的 CSS 属性两者都提供两个核心方法style接受一组属性值对生成样式对象同名属性后写者生效styleE先合并已有样式、再追加新属性是搭建主题体系的利器最简示例摘自官方统一样式文档object styles extends UniversalStyleSheet { val centering style(alignItems.center, justifyContent.center) val gray style(backgroundColor : #cccccc) val horizontal style(flexDirection.row, justifyContent.center) val default styleE(centering, gray)(height : 40) }注意styleE(centering, gray)(height : 40)一行代码合并三个样式这就是 Sri 统一样式复用的标准姿势。三、UniversalStyleSheet 全部属性清单属性集合定义在 NativeAttrs.scala按五大类整理如下 布局与 Flexbox最常用分组可用属性Flex 布局flex/flexOne、flexBasis、flexGrow、flexShrink、flexDirection(row/column)、flexWrap对齐方式alignItems、alignSelf、justifyContentcenter、space-between 等定位层级position(relative/absolute)、top/right/bottom/left、zIndex、overflow 尺寸、间距与边框尺寸width、height、minWidth/maxWidth、minHeight/maxHeight、aspectRatio外边距margin及marginLeft/Right/Top/Bottom、marginHorizontal/Vertical内边距padding及paddingLeft/Right/Top/Bottom、paddingHorizontal/Vertical边框borderWidth含四边、borderColor含四边、borderStyle(solid/dotted/dashed)、borderRadius含四角圆角 颜色与效果backgroundColor、opacity、tintColor、shadowColor/shadowRadius/shadowOffset/shadowOpacity、elevationAndroid 阴影层级。✍️ 文本color、fontSize、fontWeight100~900如fontWeight._500、fontStyle、textAlign、lineHeight、letterSpacing、textDecorationLine、lineBreakMode、textShadow*。️ 图片与变换resizeMode、transform、rotation、scaleX/scaleY、translateX/Y、transformMatrix。另外UniversalStyleSheet 自带两个预设wholeContainer撑满容器等价flex:1与flexOne拿来即用。四、唯一要小心的坑Web 端数字要加 px在 Sri Mobile 中padding : 10即可但 Web 的 CSS 需要10px。为此 WebStyleSheet 专门提供了styleM方法对 margin、padding、width、height、borderRadius 等数字值自动补上px后缀。把 Mobile 样式搬到 Web 时只需把style换成styleM无需逐项改写。五、实战示例Movies 应用的样式写法仓库内置的 mobile-examples 电影应用完全由 Sri 统一样式驱动。看列表项 MovieCell.scalarow定义横向布局 白底 居中对齐cellImage固定缩略图 60×93全部属性在组件里直接以style styles.row应用运行时零处理。Web 端示例则用同样模式抽出主题对象 Theme.scalaflexOneAndCenter、horizontal、bigText等再配合styleE派生新样式风格高度一致。同一套 UI 理念还能跑上桌面端Electron六、快速上手清单 ✅引入模块跨平台/移动端用sri-universalWeb 端用sri-web版本参考 Dependencies.scala定义在组件内建object styles extends UniversalStyleSheet组合style打底 styleE扩展沉淀出Theme式小主题应用组件属性里直接style styles.xxxWeb 适配数字值需要单位时改用styleM 小贴士同名属性后写者生效扩展样式时可放心依赖这一规则做局部覆盖。七、获取 Sri 仓库git clone https://gitcode.com/gh_mirrors/sr/sri克隆后与统一样式相关的关键路径官方统一样式文档UniversalStyles.md样式核心实现universal/src/main/scala/sri/universal/styles/Web 端样式表实现web/src/main/scala/sri/web/styles/移动端 / Web 端示例mobile-examples/ 与 web-examples/定义、扩展、应用三步走Sri 统一样式把两套样式变成一套样式——这正是 Sri 一套代码三端运行的最简起点。【免费下载链接】sriBuild truly native cross platform (web,ios,android) apps using scalajs and react, react-native项目地址: https://gitcode.com/gh_mirrors/sr/sri创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考