weex-nuke/src/node_modules/nuke-layout/docs/isv.md

基于 Rax 、Weex 的高性能组件体系 ~~

# Layout Demo2

* order: 1

Grid,Row,MultiRow 基础使用

---

```js
'use strict';
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Layout from 'nuke-layout';
const { MultiRow, Grid, Col } = Layout;

class User extends Component {
  constructor(props) {
    super(props);
  }

  renderGridCell(item, index) {
    return (
      <View style={[styles.gridcell, item.title ? styles.title : {}]}>
        <Text>{item.value}</Text>
      </View>
    );
  }

  renderSkus() {
    var data = [];
    var length = 2;
    data.push({ value: '库存', title: true });
    data.push({ value: '价格', title: true });
    data.push({ value: '有木有' });
    data.push({ value: '有木有' });

    return (
      <View>
        <MultiRow
          style={styles.rowSku}
          dataSource={data}
          rows={length}
          renderRow={(item, index) => {
            return this.renderGridCell(item, index);
          }}
        />
      </View>
    );
  }

  render() {
    return (
      <View>
        <View style={[styles.approw, styles.row]}>{this.renderSkus()}</View>
      </View>
    );
  }
}

const styles = {
  approw: {
    minHeight: '88rem',
    // flexDirection:'row',
    justifyContent: 'space-between',
    backgroundColor: '#ffffff',
    alignItems: 'flex-start'
  },
  row: {
    paddingTop: '15rem'
  },
  rowSku: {
    flex: 1,
    backgroundColor: '#ffffff',
    marginLeft: '40rem',
    marginRight: '40rem',
    borderLeftWidth: '1rem',
    borderBottomWidth: '1rem',
    borderColor: '#d9d9d9'
  },
  gridcell: {
    paddingTop: '28rem',
    paddingBottom: '28rem',
    justifyContent: 'center',
    alignItems: 'center',
    borderTopWidth: '1rem',
    borderRightWidth: '1rem',
    backgroundColor: '#ffffff',
    borderColor: '#d9d9d9'
  },
  title: {
    backgroundColor: '#f8f8f8'
  }
};

render(<User />);
```