weex-nuke/lib/node_modules/nuke-layout/docs/basic.md

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

# Grid, Col, MultiRow 基础使用

- order: 0
- title_en: Grid, Row, MultiRow basic usage

Grid,Row,MultiRow 基础使用

---
```js
<NukePlayGround>
  <Grid style={{ height: 300, padding: 30 }}>
    <Col style={{ flex: 3, justifyContent: 'center', alignItems: 'center', backgroundColor: '#00C9A7' }} >
      <Text>col1</Text>
    </Col>
    <Col style={{ justifyContent: 'center', alignItems: 'center', backgroundColor: '#C4FCEF' }} >
      <Text>col2</Text>
    </Col>
  </Grid>

  <MultiRow
    dataSource={self.state.gridData}
    rows={2}
    renderCell={this.renderGridCell}
  />
</NukePlayGround>
```
---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import Touchable from 'nuke-touchable';
import Icon from 'nuke-icon';
import Button from 'nuke-button';
import Layout from 'nuke-layout';
import Page from 'nuke-page';

const { MultiRow, Grid, Col } = Layout;
let gridData = [];
for (var i = 0; i < 8; i++) {
  gridData.push({ name: 'cell' + i });
}

let App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      gridData: gridData
    };
  }
  componentDidMount() {
    gridData = gridData.concat([{ name: 'cell8' }, { name: 'cell9' }]);
  }
  renderGridCell = (item, index) => {
    return (
      <Touchable style={styles.gridcell}>
        <Text style={styles.funTitle}>{item.name}</Text>
      </Touchable>
    );
  };

  render() {
    var self = this;
    return (
      <Page title="Layout">
        <Page.Intro main="Grid" />
        <Grid style={{ height: 300, padding: 30 }}>
          <Col
            style={{
              flex: 3,
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: '#00C9A7'
            }}
          >
            <Text>col1</Text>
          </Col>
          <Col
            style={{
              justifyContent: 'center',
              alignItems: 'center',
              backgroundColor: '#C4FCEF'
            }}
          >
            <Text>col2</Text>
          </Col>
        </Grid>
        <Page.Intro main="MultiRow rows=2" />
        <View style={styles.lineWithMargin}>
          <MultiRow
            dataSource={self.state.gridData}
            rows={2}
            renderCell={this.renderGridCell}
          />
        </View>
        <Page.Intro main="MultiRow rows=4" />
        <View style={styles.lineWithMargin}>
          <MultiRow
            dataSource={self.state.gridData}
            rows={4}
            renderCell={this.renderGridCell}
          />
        </View>
      </Page>
    );
  }
};
const styles = {
  lineWithMargin: {
    marginLeft: '25rem',
    marginRight: '25rem'
  },
  gridcell: {
    height: '200rem',
    backgroundColor: '#ffffff',
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: '1rem',
    borderStyle: 'solid',
    borderColor: '#e8e8e8',
    marginTop: '-1rem',
    marginLeft: '-1rem'
  },

  sub: {
    color: '#999999'
  }
};
render(<App />);
```