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/sri

Sri（Scala React interface）是一个基于 Scala.js + React + React Native 的跨平台框架，一套代码可同时构建 Web、iOS、Android 应用。Sri 统一样式的核心就是 UniversalStyleSheet：一份样式定义，Web 与 Mobile 通用，不用为 CSS 和 React Native 分别重写。

本文是 Sri 统一样式的完整清单：如何定义样式、如何扩展复用、全部可用属性列表，以及唯一一个需要小心的单位差异。

一、为什么 Sri 需要"一套样式三端用"

跨平台写样式，通常要在两种习惯里二选一：Web 的 CSS 写padding: 10px，React Native 却要求padding: 10。结果就是平台 if-else 写进代码，样式定义分裂成两套：

Sri 的解法：把 Web 与 Mobile 共同支持的样式属性抽成一个通用集合，用同一套语法定义一次——这正是 Sri 统一样式要解决的问题。

二、快速上手：style 与 styleE 两个核心方法

Sri 的样式表按平台分两个 trait：

样式表	所在模块	适用场景
UniversalStyleSheet	universal	Web + Mobile 通用样式（跨平台组件首选）
WebStyleSheet	web	Web 专用，支持更完整的 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`、`justifyContent`（center、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、elevation（Android 阴影层级）。

✍️ 文本

color、fontSize、fontWeight（100~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.scala：row定义横向布局 + 白底 + 居中对齐，cellImage固定缩略图 60×93，全部属性在组件里直接以style = styles.row应用，运行时零处理。

Web 端示例则用同样模式抽出主题对象 Theme.scala（flexOneAndCenter、horizontal、bigText等），再配合styleE派生新样式，风格高度一致。

同一套 UI 理念还能跑上桌面端（Electron）：

六、快速上手清单 ✅

引入模块：跨平台/移动端用sri-universal，Web 端用sri-web，版本参考 Dependencies.scala
定义：在组件内建object styles extends UniversalStyleSheet
组合：style打底 +styleE扩展，沉淀出Theme式小主题
应用：组件属性里直接style = styles.xxx
Web 适配：数字值需要单位时改用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），仅供参考

企业官网建设流程全解析