一、描述

rax-grid 是 rax 的内置组件,主要面向移动端的简单布局使用。

其实在使用 rax 的时候,真的需要用到 rax-grid 的机会不是很多,因为主要是在 weex 容器上跑,如果只是 web 端的话,那我还是觉得使用 react 配上一个移动端的 UI 库,足够了。rax 最大优势在于无线开发方面 bundle 很小,而且整个框架对于 weex 容器做了很多优化。

引入方式:

yarn add rax-grid
# npm install -S rax-grid
import {Row,Col} from 'rax-grid';

rax-grid 官方文档地址:

二、源码

rax-grid 并不是一个单独的组件,而是由 <Row><Col> 组成的,因此源码也分成 Col.jsRow.js.

1、Row.js

<Row><Col> 的外层包裹容器,本质上还是渲染了一个 <View>,Row 的默认样式如下:

const styles = {
  initial: {
    display: 'flex',
    justifyContent: 'center',
    flexDirection: 'row',
  }
};

Row 组件可以通过 props 传递样式,而且会覆盖掉默认的样式。

在源码中,刻意提到了一个 prop,是 this.props.gridType,这个 prop 默认是覆盖掉 justify-content 的默认样式。如果 gridType 的值是 flex-start 的话,Row 的默认样式中 display 会变成 display:block;

但是在 weex 的容器样式文档中提到:在 Weex 中,Flexbox 是默认且唯一的布局模型,所以你不需要手动为元素添加 display: flex; 属性。,所以我不明白,为什么要多此一举的来一个 display:block,是否是为了以后框架的发展考虑从?

我试了一下,同样的代码,如果传递了 flex-startgridType,样式会发生错误。

本来的效果:

1.png

传递 gridType="flex-start" 之后:

2.jpg

2、 Col.js

组件代码更简单,只是渲染出 this.props.children 在加上样式,默认的样式如下:

      <View
        {...this.props}
        style={{
          flex: 1,
          ...style,
          width: '1%',
        }}
      />

通过 props 传递的 style 会覆盖掉默认的 style

三、组件实践

Grid 组件其实还是很简单的,因为无非就是相当于自己手动使用 flex-box + <View> 实现的布局,而 Grid 将这种应用给简化。

一个实例使用代码如下:

均分三列 以及 两列 + 一列 的布局均由 <Col> 组件的 flex:1 控制

1、jsx

import {Component,createElement} from 'rax';
import View from 'rax-view';
import Text from 'rax-text';
import {Row, Col} from 'rax-grid';

import styles from './index.css';

class TestGrid extends Component{
  state = {}

  render(){
    return(
        <View>
          <Row style={styles.row} gridType="flex-start">
              <Col style={[styles.col,styles.bg1]}>
                <Text>1</Text>
              </Col>
              <Col style={[styles.col,styles.bg2]}>
                <Text>2</Text>
              </Col>
              <Col style={[styles.col,styles.bg3]}>
                <Text>3</Text>
              </Col>
          </Row>
          <Row style={styles.row}>
            <Col style={[styles.col,styles.bg3,{flex:2}]}></Col>
            <Col style={[styles.col,styles.bg2,{flex:1}]}></Col>
          </Row>
        </View>
    );
  }
} 

export default TestGrid;

2、css

.row{
  width:750;
}
.col{
  flex:1;
  height:250;
}
.bg1{
  background-color:#000000;
}
.bg2{
  background-color:#cccccc;
}
.bg3{
  background-color:#aaaaaa;
}

3、效果

3.jpg