# Cell 需要和 ListView 配合使用

- order: 0
- title_en : Cell must be used inside list-like components

---

```js
<NukePlayGround>
  <ListView>
    {['a', 'b'].map((item, index) => {
      return (
        <Cell>
          <Text>{item}</Text>
        </Cell>
      );
    })}
  </ListView>
</NukePlayGround>
```

---

```js
/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import ListView from 'nuke-list-view';
import Cell from 'nuke-cell';

class Demo extends Component {
  constructor() {
    super();
    this.state = {
      data: ['item_1', 'item_2', 'item_3', 'item_4', 'item_5', 'item_6', 'item_7', 'item_8', 'item_9']
    };
  }
  render() {
    return (
      <ListView _autoWrapCell={false} showScrollbar={false} style={styles.listContainer}>
        {this.state.data.map((item, index) => {
          return (
            <Cell key={`cell_${index}`}>
              <View style={[styles.cellItem]}>
                <Text style={styles.text}>{item}</Text>
              </View>
            </Cell>
          );
        })}
      </ListView>
    );
  }
}
const styles = {
  listContainer: {
    flex: 1
  },
  cellItem: {
    width: 750,
    height: 200,
    paddingTop: 20,
    flexDirection: 'row',
    borderBottomWidth: 1,
    borderBottomStyle: 'solid',
    borderBottomColor: '#cccccc',
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    color: '#666666'
  }
};
render(<Demo />);
```