3.7 样式

优质

小牛编辑

129浏览

2023-12-01

为了让weex 保持高性能渲染，我们的样式具有以下几个与传统web前端css 不同的地方：

样式使用js定义
不能被继承
布局仅支持flexbox
样式不能针对所有标签元件生效

js定义样式

在 Rx 中，我们利用js定义样式，每个组件都支持一个 style 属性，用来定义组件的样式。像这样：

<View style={styles.container}>
  <Text>hello world</Text>
</View>

const styles = {
  container: {
    backgroundColor: 'grey',
    width: '750rem'
  }
};

多个样式叠加

<View style={[styles.container,styles.new,{backgroundColor:'yellow'}]}>
  <Text>hello world</Text>
</View>

const styles = {
  container: {
    backgroundColor: 'grey',
    width: '750rem'
  },
  new:{
      borderWidth:'1rem',
      borderStyle:'solid',
      borderColor:'#ffffff'
  }
};

上述样式数组merge 为样式 Object 后作为View的最终样式渲染。

样式参考手册

受限于Native，Rx 对样式的支持只是传统css的一个子集。请查看通用样式

关于样式书写

参考上述例子，必须准守驼峰式规范
为了降低使用上的不适感，我们做了样式语法糖工具 - rx-css-loader，具体参考下一章节

关于rem

Rx 提供的 rem 单位与原来传统的 rem 的含义是不同的。

1rem = document.documentElement.clientWidth / 750

我们推荐视觉稿产出宽度为750px，在这样的前提下，我们在 750 的设计稿上量到的数值是abc，那么 width : abc rem 就是我们需要映射到元素上的尺寸。
不加单位的width: abc写法也是可以的，在Rx 框架中默认被解析为 width: abc rem
为了降低使用上的不适感，我们做了样式语法糖工具 - rx-css-loader，具体参考下一章节

Flexbox 布局

在 Rx 中，Flexbox 是默认且唯一的样式模型，所以你不需要手动为元素添加 display: flex; 属性。
记不住flexbox 属性值和value? 我们为你提供速查样式库 https://g.alicdn.com/nuke/doc-case/0.0.1/flex.html