Nuke 与 QAP get started 文档

样式

为了让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 布局