Fork me on GitHub

Rax(3)-关于样式

发表于 | 分类于
字数统计: 423 | 阅读时长 ≈ 2
Rax入门-样式

基础

在Rax中，我们可以利用js定义样式，与原生的html的style标签不同，Rax元件接收的style属性类型是一个对象。比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 定义样式集合
const styles = {
  container: {
    padding: '20rem',
    height: '300rem',
    fontSize: '28rem',
    backgroundColor: 'red'
  },
  container_title: {
    color: '#fff',
    fontSize: '32rem' // font-size不会继承父或祖先元素，需重新定义
  }
};
// 应用样式
const App = (props) => {
  return (
    <View style={styles.container}>
      <Text style={styles.container_title}>Hello World</Text>
    </View>
  );
};

受于Native元素渲染方式，元件之间的嵌套关系并不会带来样式继承的效果，因此需要格子描述对应元素的样式。

单位规范

我们推荐使用不加单位的写法：

1
2
3
4
5
6
7
8
9
10
<View style={styles.container}>
  <Text>hello world</Text>
</View>
const styles = {
  container: {
    background: 'grey',
    width: 375
  }
};

1个单位的大小为屏幕宽度的1/750，这样做的好处是当你拿到一份750px宽的视觉稿，你再也不需要去做人工换算。

布局

在Weex/Rax中，不再支持float布局，取而代之的是flexbox布局

分离式代码

Rax提供了一个Webpack插件——stylesheet-loader，让我们能够在Rax应用中通过CSS写样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
/* hello-world.css */
.container {
  padding: 20rem;
  height: 300rem;
  background-color: red;
}
.container_title {
  color: #fff;
  font-size: 32rem;
  border-width: 1px;
}

引入

1
2
/* hello-world.js */
import styles from './hello-world.css';

webpack配置

1
2
3
4
{
    test: /\.css$/,
    loader: 'stylesheet'
}

除了样式代码的分离，少写几个引号之外，stylesheet-loader的好处还在于：

  • 对于Wexx不支持的样式，能快速的给予友好的warning提示
  • 可以跟sass/less-loader结合，使用变量、mixin、嵌套等预编译功能

warning提示：
比如：Weex不支持float、z-index样式，那么stylesheet-loader会提示。

参考资料

Rax深入浅出 – 样式编写

undefined